Editing Javascript to change button color once clicked

Question

I'm new to Javascript, the Javascript i have currently was copied from the internet but i need to edit it slightly to fit my needs.

Currently the code i have will change the color of a button by clicking on another button under the same id, it does this by adding and removing a tag called 'active'. This works fine but i have one issues with it i need help changing:

In order for it to work one of the buttons must have the 'active' tag on to start with. I would like it so that to start with none of the buttons are 'active' until one is pressed. (e.g when the user sees the buttons they are all the same color, until they press one). Once one is pressed the code works the same as of currently.

If i remove the active tag from the code to start with the Javascript doesn't seem to work, and the buttons don't gain the active tag when clicked. How can i change this. Here is my current code:

HTML:

<div id="buttonscontainer">
  <div class="button active>Test1</div>
    <div class="button">Test2</div>
    <div class="button">Test3</div>
    <div class="button">Test4</div>
    <div class="button">Test5</div> 
  </div> 

CSS:

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}

Javascript:

<script>
var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>

Answer 1

you missed " double quotes near to active class

That is in HTML

<div class="button active>Test1</div>

changes to

<div class="button active">Test1</div>

Check in script is having current variable value.

if(current.length){ ..... } // check if current having value

var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
    if(current.length){
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    }
  });
}

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}

Having Active button
<div id="buttonscontainer">
  <div class="button active">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>

Dosn't Have active button
<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>

Answer 2

Because when no active class has existed it returns undefined. You can remove all the active class first then append the active class to the new clicked button.

var header = document.getElementById("buttonscontainer");
var btns = header.querySelectorAll(".button");

btns.forEach( button => {
  //set click event
  button.addEventListener('click', function() {
    //remove all the active class from buttons
    btns.forEach( oldButton => {
      oldButton.classList.remove('active');
    });
    
    //append the active class to the new clicked button
    this.classList.add('active');
  })
})

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}

<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div>
</div>

Answer 3

I strongly recommend you using jQuery for this kind of things. Check how the JS code looks like.

const setColor = (e) => {
  $('.button').removeClass('active')
  $(e.target).addClass('active')
}

$('.button').on('click', setColor);

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>

Answer 4

Change your script to this:

<script>
  var header = document.getElementById("buttonscontainer");
  var btns = header.getElementsByClassName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (event) {
      var current = document.getElementsByClassName("active");
      if (current.length == 0) event.target.className += " active";
      else {
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      }
    });
  }
</script>

It will make the button active on click if no other button is active at the moment. So it will work for your purpose probably :)

Answer 5

All you need to do is create a check if current[0] is undefined or not, this should work just fine

var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if(current[0] != undefined){
  current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active, .button:hover {
    background-color: #32a852;
}

<div id="buttonscontainer">
  <div class="button">Test1</div>
    <div class="button">Test2</div>
    <div class="button">Test3</div>
    <div class="button">Test4</div>
    <div class="button">Test5</div> 
  </div>