CODEWITHSUNDEEP
javascript
Burger Sasha
Burger Sasha

Reputation: 175

How to specify only the element being clicked in JS

I'm trying to understand how to only trigger the function on the button being click - currently my code is applying it to all elements and only the first is changing innerTEXT

var toggleInnerHTML = document.querySelectorAll(".toggleBtn");
  var desc = document.querySelectorAll('.description');
  

        for (i = 0; i < toggleInnerHTML.length; i++) {
          toggleInnerHTML[i].addEventListener('click', toggleText);
          var curText = toggleInnerHTML[i].innerText;
        }
       
        function toggleText() {
          for (i = 0; i < curText.length; i++) {
            if(this.innerText == curText[i]){
              toggleInnerHTML[i].innerText = "-";
            }
            else{
              toggleInnerHTML[i].innerText = curText[i];
            }
          }
            for (i = 0; i < desc.length; i++) {
              desc[i].classList.toggle('open');
            }
            
  }
.description {
      display: none;
  }
  .description.open {
      display: block;
  }
<div>
        <button class="toggleBtn">+</button>
        <div class="description">Text goes here</div>
</div>
<div>
        <button class="toggleBtn">+</button>
        <div class="description">Text goes here</div>
</div>
<div>
        <button class="toggleBtn">+</button>
        <div class="description">Text goes here</div>
</div>

Upvotes: 0

Views: 45

Answers (3)

MRE
MRE

Reputation: 47

why don't you use onclick='functiontocall() inside your html

for example

<button class="toggleBtn" onclick='Showtext('description1')'>+</button>

and JS

function Showtext(textclass){
      document.getElementsByClassName(textclass).display = "block";
}

but you should change description divs to description1 and description2 and description3

in this case you can specify your buttons

i hope it be useful for you

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22355

classList.toggle return a Boolean value, so:

document.querySelectorAll(".toggleBtn").forEach(bt=>
  {
  bt.onclick=_=>{
    bt.textContent = bt.nextElementSibling.classList.toggle('open') ? '-' : '+'
    } 
  })
.description {
  display: none;
}
.description.open {
  display: block;
}
<div>
  <button class="toggleBtn">+</button>
  <div class="description">Text goes here</div>
</div>
<div>
  <button class="toggleBtn">+</button>
  <div class="description">Text goes here</div>
</div>
<div>
  <button class="toggleBtn">+</button>
  <div class="description">Text goes here</div>
</div>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371019

Inside the listener, check the argument to get the event, which points you to the button that was clicked. Then, you can reassign that button's text, and navigate to its nextElementSibling to get to its adjacent .description element:

var toggleInnerHTML = document.querySelectorAll(".toggleBtn");
var desc = document.querySelectorAll('.description');


for (i = 0; i < toggleInnerHTML.length; i++) {
  toggleInnerHTML[i].addEventListener('click', toggleText);
}

function toggleText(e) {
  e.target.textContent = e.target.textContent === '+' ? '-' : '+';
  e.target.nextElementSibling.classList.toggle('open');

}
.description {
  display: none;
}

.description.open {
  display: block;
}
<div>
  <button class="toggleBtn">+</button>
  <div class="description">Text goes here</div>
</div>
<div>
  <button class="toggleBtn">+</button>
  <div class="description">Text goes here</div>
</div>
<div>
  <button class="toggleBtn">+</button>
  <div class="description">Text goes here</div>
</div>

Upvotes: 2

Related Questions