How can I do so that if one button is toggled other buttons stay untoggled (learning dom manipulatio-CodePudding

I was learning DOM manipulation and I made 3 buttons that change their styles when clicked however I was wondering how I can make it so that when I click one of the buttons the others go back to their original white background style so that only 1 of these 3 buttons can stay clicked. Sorry if I'm not explaining it right... I tried for a long time I googled a lot, something is not right with the logic I implemented probably. The idea is like I want it to be sorta checked like you can select only one of 3 buttons.

<!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>
</head>
<body>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button> 
        <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
        </div>
          <style>
          .buttons-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            height:42px;
            margin:auto;
            cursor: pointer;
          }

        </style>
    <script>
// Button 1 
 var valueto = "off";
      var testerbutona = document.getElementById("testerbuton");
              testerbutona.addEventListener('click',function(){
              if(valueto === "off" && valueto2 === "off2" && valueto3 === "off3"){
              testerbutona.style.backgroundColor ="black";
              testerbutona.style.border ="3px solid white";
              testerbutona.style.color ="white";
              valueto = "on";
              }
              else if(valueto === "on" || valueto2 === "on2" || valueto3 ==="on3"){
                   testerbutona.style.backgroundColor ="white"; 
                  testerbutona.style.border ="3px solid black";
                   testerbutona.style.color ="black";
                    valueto = "off";                                  
                        }
            })
// Button 1 


// Button 2

var valueto2 = "off2";
      var testerbutona2 = document.getElementById("testerbuton2");
     
        testerbutona2.addEventListener('click',function(){
              if(valueto2 === "off2" && valueto === "off" && valueto3 === "off3"){
              testerbutona2.style.backgroundColor ="black";
              testerbutona2.style.border ="3px solid white";
              testerbutona2.style.color ="white";
              valueto2 = "on2";
              }
              else if(valueto2 === "on2" || valueto === "on" || valueto === "on3"){
                   testerbutona2.style.backgroundColor ="white"; 
                  testerbutona2.style.border ="3px solid black";
                   testerbutona2.style.color ="black";
                    valueto2 = "off2";                                  
                        }
            })

// Button 2

// Button 3
var valueto3 = "off3";
      var testerbutona3 = document.getElementById("testerbuton3");
              testerbutona3.addEventListener('click',function(){
              if(valueto3 === "off3" && valueto === "off" && valueto2 === "off2"){
              testerbutona3.style.backgroundColor ="black";
              testerbutona3.style.border ="3px solid white";
              testerbutona3.style.color ="white";
              valueto3 = "on3";
              }
              else if(valueto3 === "on3" || valueto === "on" || valueto2 === "on2"){
                   testerbutona3.style.backgroundColor ="white"; 
                  testerbutona3.style.border ="3px solid black";
                   testerbutona3.style.color ="black";
                    valueto3 = "off3";                                  
                        }
            })
// Button 3
    </script>


</html>

CodePudding user response：

its like this?

const buttons = document.querySelectorAll('.buttons-for-the-books');

buttons.forEach(function(button){
  button.addEventListener('click', function(event){
    
    buttons.forEach(function(button){
      button.style.backgroundColor = '#fff';
      button.style.color = '#000';
    });
    
    this.style.backgroundColor = '#000';
    this.style.color = '#fff';
  });
});

.buttons-for-the-books{
    border: 3px solid #191919;
    background-color: white;
    height:42px;
    margin:auto;
    cursor: pointer;
}

<div class="center">
    <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
    <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button> 
    <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
</div>

i use querySelector to select all buttons with class 'buttons-for-the-books', then give it click listener for each button.

CodePudding user response：

If you add the event listener to the container, and cache the buttons by class, you can avoid a lot of that code by simply iterating over the buttons, removing the new "selected" class if they have one, and then adding the "selected" class to the button that was clicked.

const container = document.querySelector('.container');
const buttons = container.querySelectorAll('.buttons-for-the-books');

container.addEventListener('click', handleClick, false);

function handleClick(e) {
  buttons.forEach(button => {
    button.classList.remove('selected');
  });
  e.target.classList.add('selected');
};

.buttons-for-the-books { border: 3px solid #191919; background-color: white; height: 42px; margin: auto; cursor: pointer; }
.selected { background-color: black; color: white; }

<div class="container">
  <button class="buttons-for-the-books">Choose that one</button>
  <button class="buttons-for-the-books">Choose that one</button>
  <button class="buttons-for-the-books">Choose that one</button>
</div>

CodePudding user response：

        <!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>
    <style>
        .buttons-for-the-books {
            border: 3px solid #191919;
            background-color: white;
            height: 42px;
            margin: auto;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="center">
        <button class="buttons-for-the-books" id="testerbuton">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton2">Choose that one</button>
        <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
    </div>
    <script>
        var valueto = "off";
        var valueto2 = "off";
        var valueto3 = "off";
        var testerbutona = document.getElementById("testerbuton");
        var testerbutona2 = document.getElementById("testerbuton2");
        var testerbutona3 = document.getElementById("testerbuton3");
        var button = document.getElementsByClassName('buttons-for-the-books');
        testerbutona.addEventListener('click', function () {
            valueto = "on";
            if (valueto2 === "on" || valueto3 === "on") {
                testerbutona2.style.backgroundColor = "white";
                testerbutona2.style.border = "3px solid black";
                testerbutona2.style.color = "black";
                testerbutona3.style.backgroundColor = "white";
                testerbutona3.style.border = "3px solid black";
                testerbutona3.style.color = "black";
                valueto2 === "off";
                valueto3 === "off";
            }
            testerbutona.style.backgroundColor = "black";
            testerbutona.style.border = "3px solid white";
            testerbutona.style.color = "white";
        })
        testerbutona2.addEventListener('click', function () {
            valueto2 = "on";
            if (valueto === "on" || valueto === "on") {
                testerbutona.style.backgroundColor = "white";
                testerbutona.style.border = "3px solid black";
                testerbutona.style.color = "black";
                testerbutona3.style.backgroundColor = "white";
                testerbutona3.style.border = "3px solid black";
                testerbutona3.style.color = "black";
                valueto === "off";
                valueto3 === "off";
            }
            testerbutona2.style.backgroundColor = "black";
            testerbutona2.style.border = "3px solid white";
            testerbutona2.style.color = "white";
        })
        testerbutona3.addEventListener('click', function () {
            valueto3 = "on";
            if (valueto === "on" || valueto2 === "on2") {
                testerbutona.style.backgroundColor = "white";
                testerbutona.style.border = "3px solid black";
                testerbutona.style.color = "black";
                testerbutona2.style.backgroundColor = "white";
                testerbutona2.style.border = "3px solid black";
                testerbutona2.style.color = "black";
            }
            valueto === "off";
            valueto2 === "off";
            testerbutona3.style.backgroundColor = "black";
            testerbutona3.style.border = "3px solid white";
            testerbutona3.style.color = "white";

        })
    </script>
</body>

</html>