CODEWITHSUNDEEP
javascriptcss
Plantas y remedios Caseros
Plantas y remedios Caseros

Reputation: 63

how to remove a class with the onclick event with javascript

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>

Upvotes: 2

Views: 8382

Answers (3)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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>

Upvotes: 2

CodeDead
CodeDead

Reputation: 187

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/

Upvotes: 1

Mohamed Amr
Mohamed Amr

Reputation: 11

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>

Upvotes: 1

Related Questions