Changing Background Colour of Button - Change when clicked, remove when another button is clicked

Question

First time poster - have tried to find solution elsewhere but not able to.

I have created a grid of buttons. Upon clicking button 1, I want the background to change to a preset colour. When another button is clicked (button 2), I would like the button(1) background to change back to the original, followed by the newly clicked button (button 2) to take on the preset colour.

Here is the HTML written so far:

    <div class="tip-select">
      <p class="ttext">Select Tip %</p>
      <div class="tip">
        <div class="five-tip btn tips">5%</div>
        <div class="ten-tip btn tips">10%</div>
        <div class="fifteen-tip btn active-tip tips">15%</div>
        <div class="twentyfive-tip btn tips">25%</div>
        <div class="fifty-tip btn tips">50%</div>
        <div class="custom btn tips">Custom</div>
      </div>
    </div>

Here is the Javascript written so far:

tips.forEach(function (mov) {
  mov.addEventListener("click", handleClick);
});


function handleClick(event) {
tips.forEach(function (val) {
  if (event.target.innerHTMl == val.innerHTMl) {
    val.classList.add("active-tip");
    console.log(val);
  }
  });
}

Here is the current design for reference:

My thought is to iterate through the nodelist and assign active-tip as a class based on the button selected. At the moment though all of the buttons are changing colour when clicked.

Answer 1

First, JavaScript is case sensitive, so innerHTMl should read innerHTML . But that isn't a sound method to achieve your wanted effect.

Also, tips needs to be an array, so use querySelectorAll to return a live collection ('live' means that only references to the elements are stored and not the elements). To make this into an array, use Array.from() .

remove all the active-tip styles first, and then add the new one to the required element.

 tips=Array.from(document.querySelectorAll('.tips')); tips.forEach(function (mov) { mov.addEventListener("click", handleClick); }); function handleClick(e) { tips.forEach((t)=>t.classList.remove("active-tip")); e.target.classList.add("active-tip"); }

 .active-tip {color:red}

 <div class="tip-select"> <p class="ttext">Select Tip %</p> <div class="tip"> <div class="five-tip btn tips">5%</div> <div class="ten-tip btn tips">10%</div> <div class="fifteen-tip btn active-tip tips">15%</div> <div class="twentyfive-tip btn tips">25%</div> <div class="fifty-tip btn tips">50%</div> <div class="custom btn tips">Custom</div> </div> </div>

Answer 2

You you can add a prameter to function which is the id or class of your div so when your function called your function take the innertext of the div with you id you get from pramerter.

Answer 3

I suggest you compare the node objects rather than their innerHtml . In addition, you are missing the else case to reset all non selected nodes (remove the active-tip class).

Here's an example

let tips = Array.from(document.getElementsByClassName('tips'))

tips.forEach(function (mov) {
  mov.addEventListener("click", handleClick);
});

function handleClick(event) {
  tips.forEach(function (val) {
    if (val == event.target) {
      val.classList.add("active-tip");
    } else {
      val.classList.remove("active-tip");
    }
  });
}

and the complete codepen example here https://codepen.io/beezital/pen/OJxoxmK