how to get class name with javascript

Question

I’m making an accordion and it’s already functional as I’d like (just a few details I’ll get right later). Only now I need that when clicked and the panel expanded, the + (show more) sign be changed to - (show less).

P.S.: I’m a beginner in Javascript, but the logic is to take the name of the class (or try to pick up) and return a Boolean, if true perform such an action, which is to change the text of a given element.

What do I have:

  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
  }

.accordion {
  background-color: #0c4b7a;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel p:hover {
  background-color: #F47920;
  color: white;
}

<h2>Accordion</h2>

<button class="accordion">Título 1 <span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <p>There are many variations of passages of Lorem Ipsum available</p>
</div>

<button class="accordion">Título 2<span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

The following code arrow the class name in the element:

Document.getElementById("myDIV"). classname = "mystyle";

I wanted to type a get and save into a variable and check if it is true, if you are going to perform the above mentioned logic.

Answer 1

For this you just need to take the accordion item that was clicked using the first parameter of the function you declare in the click.

Once done, you can access the currentTarget of the event, which returns to you the element whose click is hitched and can take the span using the querySelector to then change the textContent, as an example below:

var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function(e) {
        let elem = e.currentTarget.querySelector('span');
        elem.textContent = elem.textContent === '+' ? '-':'+';
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
  }

.accordion {
  background-color: #0c4b7a;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel p:hover {
  background-color: #F47920;
  color: white;
}

<h2>Accordion</h2>

<button class="accordion">Título 1 <span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <p>There are many variations of passages of Lorem Ipsum available</p>
</div>

<button class="accordion">Título 2<span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

---

Another possibility, without using the received event is to do as follows:

var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        this.querySelector('span').textContent = this.classList.contains('active') ? '-' : '+';
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
  }

.accordion {
  background-color: #0c4b7a;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.panel p:hover {
  background-color: #F47920;
  color: white;
}

<h2>Accordion</h2>

<button class="accordion">Título 1 <span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  <p>There are many variations of passages of Lorem Ipsum available</p>
</div>

<button class="accordion">Título 2<span style="float: right;font-size: 20px">+</span></button>
<div class="panel">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

This way, you can directly use the this to catch the span and change to less by checking whether the classList of it contains the class active.

Answer 2

Take the class name if it is an input or select:

var elementos = document.getElementsByClassName("nome da classe").value;

Take the contents of an element if it is not input or select:

var elementos = document.getElementsByClassName("nome da classe").innerHTML;

Check if an item is Boleano

if (typeof elementos === "boolean") {
  //Faz aqui sua condição caso a sua variável de teste for booleana
}

NOTE: I did not understand if this is what you want. It seemed to be take the value of an elemto and check if it is boleano.