Javascript Toggle class on elements with class

Question

When any element with .mytrigger is clicked, .myactive will be toggled on element with #mytarget.

I have the following code:

var navclick = document.getElementsByClassName("mytrigger");
for (var i = 0; i < navclick.length; i++) {
 navclick[i].onclick = function() {
    document.getElementById('mytarget').classList.toggle("myactive");
  }
}

.myactive {
  background-color: blue;
  color: white;
}

<a class="mytrigger">Button</a>
<div id="mytarget"><p>Hello</p></div>
<a class="mytrigger">Button</a>

I need to have multiple triggers and from that this became confusing so I am unable to figure out the correct code. I can't use jquery for this.

Chirag Arora · Accepted Answer · 2019-09-01 17:42:41Z

1

Make as many as elements you want with class ".mytrigger" Just put onclick function as mentioned.

I hope this helps:- If not then please clarify your problem

HTML CODE

<a onclick="myFunction()" class="mytrigger">Button</a>
<div id="mytarget"><p>Hello</p></div>
<a onclick="myFunction()" class="mytrigger">Button</a>

Javascript CODE

function myFunction() {
  var element = document.getElementById("mytarget");
  element.classList.toggle("myactive");
}

answered Sep 1, 2019 at 17:42

Chirag Arora

3573 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Musevarg · Accepted Answer · 2019-09-01 17:52:30Z

0

Using your code, I just changed document.getElementsById to document.getElementById (removing the s).

var navclick = document.getElementsByClassName("mytrigger");

for (var i = 0; i < navclick.length; i++) {
  navclick[i].onclick = function() {
      document.getElementById("mytarget").classList.toggle('myactive');
  }
}

.myactive {
  background-color: blue;
  color: white;
}

    <button class="mytrigger">Button
    </button>

    <div id="mytarget"><p>Hello</p>
    </div>

    <button class="mytrigger">Button
    </button>

edited Sep 1, 2019 at 17:52

answered Sep 1, 2019 at 17:40

Musevarg

1816 bronze badges

Comments

Dark Knight · Accepted Answer · 2019-09-03 02:56:59Z

0

Using addEventListener: It sets up a function that will be called whenever the specified event is delivered to the target.

document.getElementsByClassName('mytrigger').addEventListener('click', function() {
  document.getElementById('mytarget').classList.toggle("myactive");
});

Using document.bind:

document.bind('click', '.mytrigger', function(){  
 document.getElementById('mytarget').classList.toggle("myactive");
});

edited Sep 3, 2019 at 2:56

answered Sep 1, 2019 at 17:41

Dark Knight

6,6211 gold badge22 silver badges40 bronze badges

2 Comments

Andy Over a year ago

getElementsById?

Dark Knight Over a year ago

@bewww, if it solves your problem, do accept the answer :) Accept an answer

Collectives™ on Stack Overflow

Javascript Toggle class on elements with class

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related