how to remove a class with the onclick event with javascript

Question

any way that when I press a button it shows me a class and when I press another it removes the other class from the first button and so on with the other buttons?

Thank you for your help

function myFunction() {

  document.getElementById("active1").classList.add('MyClass');
}
function myFunction2() {

   document.getElementById("active").classList.add('MyClass');
}
function myFunction3() {

   document.getElementById("active2").classList.add('MyClass');
}

.MyClass {
    background-color: red;
    color: #00ff1f;
}

<html>
<body>
<div id="active1" class="none"><button onclick="myFunction()">Try it</button></div>

<div id="active" class="none"><button onclick="myFunction2()">forobeta</button></div>
<div id="active2" class="none"><button onclick="myFunction3()">femax</button></div>
<button   onclick="myFunction4()">forobeta</button>



</body>
</html>

Louys Patrice Bessette · Accepted Answer · 2021-01-04 01:27:58Z

2

Sorry if I thought your question was a spam attempt. It was not clear you wanted to add a class on a clicked button AND remove that same class on all the other buttons.

So.... Just forget about the inline onclick with multiple functions then. One eventListener can do the job for as many buttons you like.

Just use a data attribute to store the href to open and that event listener will do the rest.

let allBtns = document.querySelectorAll("button")

// For each button, register an event listener
allBtns.forEach(function(elem){

  elem.addEventListener("click", function(e){
  
    // On click, remove the MyClass on ALL buttons
    allBtns.forEach(function(el){
      el.classList.remove("MyClass");
    });
    
    // Add the class on clicked one
    e.target.classList.add("MyClass");
    
    // Now pass the data-href to your iframe
    let theHREFtoOpen = e.target.getAttribute("data-href")
    console.log(theHREFtoOpen)
    //document.querySelector("#your-iframe").src = theHREFtoOpen
  })
})

.MyClass {
    background-color: red;
    color: #00ff1f;
}

<div><button data-href="some href!!">Try it</button></div>
<div><button data-href="some other href!!">forobeta</button></div>
<div><button data-href="and another href!!">femax</button></div>
<button data-href="as you like and so on.">forobeta</button>

answered Jan 4, 2021 at 1:27

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

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

1 Comment

Louys Patrice Bessette Over a year ago

Hint for your future questions: in your examples, unless the URL really is relevant, use http://example.com or some web services like image placeholder and json placeholder... There is many for all type of data just search for placeholder and the content type you want.... And it is really useful to test on your own side. ;)

Mohamed Amr · Accepted Answer · 2021-01-04 00:57:15Z

I did not understand everything in the question but you can use ".classList.toggle('MyClass');" instead of ".classList.add('MyClass');" to add the class when you press it and remove the same class if you press the same button again as shown in the code but if you want to make one button add class and another button remove the same class if exist you can use this piece of code ".classList.add('MyClass');" to the button the add the class and ".classList.remove('MyClass');" to the button that remove the class

function myFunction() {
  document.getElementById("myFrame").src = "https://www.youtube.com/embed/ElN_4vUvTPs";
  document.getElementById("active1").classList.toggle('MyClass');
}
function myFunction2() {
  document.getElementById("myFrame").src = "https://www.youtube.com/embed/PfrV_6yWbEg";
   document.getElementById("active").classList.toggle('MyClass');
}
function myFunction3() {
  document.getElementById("myFrame").src = "https://dood.to/e/pr9xvqpvhjxu";
   document.getElementById("active2").classList.toggle('MyClass');
}
function myFunction4() {
  document.getElementById("myFrame").src = "https://uqload.com/embed-swysx69drg1h.html";

}

.MyClass {
    background-color: red;
    color: #00ff1f;
}

<html>
<body>
<div id="active1" class="none"><button onclick="myFunction()">Try it</button></div>

<div id="active" class="none"><button onclick="myFunction2()">forobeta</button></div>
<div id="active2" class="none"><button onclick="myFunction3()">femax</button></div>
<button   onclick="myFunction4()">forobeta</button>

<iframe id="myFrame" src="/default.asp" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>

</body>
</html>

Hello thanks for your answer, but how could I do it to eliminate the class in the other elements except the one in which the button was pressed?

CodeDead · Accepted Answer · 2021-01-04 01:23:45Z

In order to add a class on a click event to a button, you could do something like this:

const btnAddClass = document.getElementById('btnAddClass');
btnAddClass.addEventListener('click', (e) => {
  btnAddClass.classList.add('blue');
});

In order to remove a class, the code is quite similar. Instead of calling the add() method on the classList property of an element, we need to call the remove() function:

btnAddClass.classList.remove('blue');

A live example can be found here:
https://jsfiddle.net/dwome9yz/

If your ultimate goal is to make some sort of 'active' element be the only one with the class enabled from a list of buttons, you could do something along the lines of this, to get rid of all the 'active' elements first:

const removeActiveClass = () => {
  const activeElements = document.getElementsByClassName('blue');
  for (const activeElement of activeElements) {
    activeElement.classList.remove('blue');
  }
};

domElement.addEventListener('click', (e) => {
  removeActiveClass(); // Call this first to remove the 'blue' class from all other elements
  btnAddClass.classList.add('blue');
});

A live example can be found here:
https://jsfiddle.net/dpzLn1tj/

A simplified approach of the code posted above would be to use the same click event handler for all the buttons and only add the class to the button that was clicked using the target property of the event argument (Event.target) that is passed down during the click event and to remove the class for all the other elements:

const removeActiveClass = () => {
  const activeElements = document.getElementsByClassName('blue');
  for (const activeElement of activeElements) {
    activeElement.classList.remove('blue');
  }
};

const onClick = (e) => {
  removeActiveClass();
  e.target.classList.add('blue');
};

document.getElementById('btnAddClass').addEventListener('click', onClick);
document.getElementById('btnRemoveClass').addEventListener('click', onClick);

Live examples can be found here:
https://jsfiddle.net/dpzLn1tj/1/
https://jsfiddle.net/27c1n0wL/

Collectives™ on Stack Overflow

how to remove a class with the onclick event with javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related