How can I change color of buttons on click-CodePudding

I have a list of button like this:

button {
        background-color: rgb(0, 174, 255);
        color: rgb(227, 72, 20);
        height: 30px;
        width: 30px;
        border-radius: 15px;
        font-size: 10px;
        margin-top: 85px;
        margin-left: auto;
        margin-right: auto;
        border-color: rgb(189, 227, 20);
        z-index: 20;
    }

<button class = "btn" id = "tp1" onclick="testpoint1()">TP1</button>
<button class = "btn" id = "tp2" onclick="testpoint2()">TP2</button>
<button class = "btn" id = "tp3" onclick="testpoint3()">TP3</button>
<button class = "btn" id = "tp3" onclick="testpoint4()">TP4</button>

At first, all buttons have the same color (color A). Then, when I click a button (e.g. TP1, its background color change to another color (color B). And when I click on another button (TP2), its color will change to B and the color of TP1 will change to its original color (color A) How can I do that with Javascripts.

CodePudding user response：

Check the below code snippet

function testpoint(evt) {
  const id = evt.target.id;
  const buttons = document.getElementsByTagName('button');
  for(let itr=0; itr<buttons.length; itr  ) {
    buttons[itr].classList.remove('btn');
  }
  const targetBtn = document.getElementById(id);
  targetBtn.classList.add('btn');
}

button {
        background-color: rgb(0, 174, 255);
        color: rgb(227, 72, 20);
        height: 30px;
        width: 30px;
        border-radius: 15px;
        font-size: 10px;
        margin-top: 85px;
        margin-left: auto;
        margin-right: auto;
        border-color: rgb(189, 227, 20);
        z-index: 20;
    }
.btn {
 background-color: yellow;
}

<button id = "tp1" onclick="testpoint(event)">TP1</button>
<button id = "tp2" onclick="testpoint(event)">TP2</button>
<button id = "tp3" onclick="testpoint(event)">TP3</button>
<button id = "tp4" onclick="testpoint(event)">TP4</button>

CodePudding user response：

You'll show the answer that you want. The result is correct. If you have some problem, send the message.

button {
    background-color: rgb(0, 174, 255);
    color: rgb(227, 72, 20);
    height: 30px;
    width: 30px;
    border-radius: 15px;
    font-size: 10px;
    margin-top: 85px;
    margin-left: auto;
    margin-right: auto;
    border-color: rgb(189, 227, 20);
    z-index: 20;
}

.active {
    background: orange;
    color: white;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="">
</head>
<body id="body">
    <button class = "btn" id = "tp1">TP1</button>
    <button class = "btn" id = "tp2">TP2</button>
    <button class = "btn" id = "tp3">TP3</button>
    <button class = "btn" id = "tp3">TP4</button>
    <script>
        var header = document.getElementById("body");
        var btns = header.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i  ) {
            btns[i].addEventListener("click", function() {
            var current = document.getElementsByClassName("active");
            if (current.length > 0) { 
                current[0].className = current[0].className.replace(" active", "");
            }
            this.className  = " active";
            });
        }
    </script>
</body>

</html>

CodePudding user response：

If you are fine with using jQuery you could do it like this. We assign a click listener to every element with the class btn, which removes the class from every btn and adds it to the specific element clicked afterwards.

$(".btn").click(function() {
  $(".btn").removeClass("active");
  $(this).addClass("active");
});

button {
  background-color: rgb(0, 174, 255);
  color: rgb(227, 72, 20);
  height: 30px;
  width: 30px;
  border-radius: 15px;
  font-size: 10px;
  margin-top: 85px;
  margin-left: auto;
  margin-right: auto;
  border-color: rgb(189, 227, 20);
  z-index: 20;
}

.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  id="tp1">TP1</button>
<button  id="tp2">TP2</button>
<button  id="tp3">TP3</button>
<button  id="tp3">TP4</button>