How to have a class toggle function to change and unchange a CSS button styling on click?

Question

I am trying to write a code that toggles the styling of a button. At first, I thought I could do this with CSS and the active selector. But I also want to be able to undo the changes on click, which the active selector does not. Then I thought I might be able to do this with JavaScript and a class toggle function.

Unfortunately, I am not that familiar with JavaScript. I have written a code and it partially works, but it always changes the styling of the same element (maybe because it is the first element with the specific class?).

Is there a way to build a flexible function which can apply to several elements, depending on which one I click on?

function testtoggle() {
 if(document.getElementById("testknop").className == "nietactief"){
 document.getElementById("testknop").className = "actief";
 } else {
  document.getElementById("testknop").className = "nietactief";
 }
}

button {
 cursor: pointer;
    padding: 16px;
    font-size: 16px;
    border-radius: 100%;
}

.nietactief {
 background-color: #a8a8a8;
    border: 5px solid #ddd;
} 

.actief {
 background-color: purple;
 border: 5px solid green;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<button type="button" id="testknop" class="nietactief" onclick="testtoggle()()">1e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle()">2e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle()()">3e</button>

</body>
</html>

Have you considered using Jquery? https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery — chevybow, Apr 17 '18 at 20:20
Hi Adam, I actually haven’t because I am not that familiar with jQuery. What would the benefit be? — user2756101, Apr 19 '18 at 12:36
In general, Jquery is aimed at making a lot of tasks easier compared to its raw Javascript implementation. Jquery often results in less lines of code and its pretty easy to pick up once you get used to the syntax. I personally prefer its syntax for selecting elements `$('#id_name')` vs `document.getElementById('id_name')`. I'm not sure I've worked on a javascript project that didn't' use jquery- it comes in handy and I think its good to learn. — chevybow, Apr 19 '18 at 14:18

Get Off My Lawn · Answer 1 · 2018-04-19T14:56:37.433

You should look into the classList feature in JavaScript. It makes it easy to add, remove and toggle classes on elements.

// Get a list of all the buttons in the group
let buttons = Array.from(document.querySelectorAll('[type=button]'))

// For each button add a click event listener
// This allows us to remove the 'onclick' from the html
buttons.forEach(item => {
  item.addEventListener('click', e => {
    // When the button is clicked, remove the active state
    // Then add the inactive state
    buttons.forEach(button => {
      // If the current button does not equal the clicked button
      // Remove the active state class
      button != e.currentTarget && button.classList.remove("actief")
      button.classList.add("nietactief")
    })
    // Toggle the state of the clicked button
    item.classList.toggle("actief")
  })
})

button {
  cursor: pointer;
  padding: 16px;
  font-size: 16px;
  border-radius: 100%;
}

.nietactief {
  background-color: #a8a8a8;
  border: 5px solid #ddd;
}

.actief {
  background-color: purple;
  border: 5px solid green;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <button type="button" id="testknop" class="nietactief">1e</button>
  <button type="button" id="testknop" class="nietactief">2e</button>
  <button type="button" id="testknop" class="nietactief">3e</button>

</body>

</html>

Hi, thank you for the help! However, I cannot undo the change by clicking again on the button. Am I doing something wrong? — user2756101, Apr 19 '18 at 12:41

Yamada · Accepted Answer · 2018-04-22T05:29:40.397

What you are observing is the expected behavior to the document.getElementById

You could pass a reference to the button triggering the event:

window.testtoggle = function(elmnt) {
  if(elmnt.className == "nietactief"){
    elmnt.className = "actief";
  } else {
    elmnt.className = "nietactief";
  }
}

button {
 cursor: pointer;
    padding: 16px;
    font-size: 16px;
    border-radius: 100%;
}

.nietactief {
 background-color: #a8a8a8;
    border: 5px solid #ddd;
} 

.actief {
 background-color: purple;
 border: 5px solid green;
}

<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">1e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">2e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">3e</button>

Alternatively you could consider JQuery to fetch all dom elements matching a specific criteria and update its class:

$("button").attr('class', 'newClass');

or another client framework like vue.js

How to have a class toggle function to change and unchange a CSS button styling on click?

2 Answers2