我怎樣才能做到如果一個按鈕被撥動，其他按鈕保持不被撥動（學習dom操作）。 -有解無憂

我正在學習DOM操作，我做了3個按鈕，在點擊時改變了它們的風格，但是我想知道如何才能使我點擊其中一個按鈕時，其他的按鈕回到它們原來的白色背景風格，這樣這3個按鈕中只有一個可以保持點擊。如果我解釋得不對，請原諒...... 我試了很久，也上網查了很多資料，可能我實作的邏輯有些不對。我的想法是，我想讓它成為某種程度上的檢查，就像你只能選擇3個按鈕中的一個。

。

<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
    <meta charset="UTF-8">/span>
    < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
    <title>Document</title> 
</head> 
<body> 
    <div class="center"> 
        < button class="button-for-the-books" id="testerbuton"> 選擇那一個</button>。
        < button class="button-for-the-books" id="testerbuton2"> 選擇那一個</button>。
        < button class="button-for-the-books" id="testerbuton3"> 選擇那一個</button>。
        </div>/span>
          <style>
          .button-for-the-books{
            border: 3px solid #191919;
            background-color: white;
            高度：42px。
            margin:自動。
            cursor: pointer;
          

        </style>>
    <script>
// Button 1 
 var valueto = "off"/span>;
      var testerbutona = document.getElementById("testerbuton") 。
              testerbutona.addEventListener('click',function(>/span>) {
              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(>/span>) {
              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

//按鈕3
var valueto3 = "off3"。
      var testerbutona3 = document.getElementById("testerbuton3") 。
              testerbutona3.addEventListener('click',function(>/span>) {
              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>/span>

uj5u.com熱心網友回復：

它是這樣的嗎？

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

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

.butts-for-the-books{
    border: 3px solid #191919;
    background-color: white;
    高度：42px。
    margin:自動。
    cursor: pointer;
}

<div class="center" > 
    < button class="button-for-the-books" id="testerbuton"> 選擇那一個</button>。
    < button class="button-for-the-books" id="testerbuton2"> 選擇那一個</button>。
    < button class="button-for-the-books" id="testerbuton3"> 選擇那一個</button>。
</div>

我使用querySelector來選擇所有具有 "buttons-for-the-books "類的按鈕，然后為每個按鈕賦予點擊監聽器。

uj5u.com熱心網友回復：

如果你將事件監聽器添加到容器中，并按類快取按鈕，你可以通過簡單地迭代按鈕，洗掉新的 "selected "類（如果它們有的話），然后將 "selected "類添加到被點擊的按鈕中，從而避免大量的代碼。

。

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

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

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

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

<div class="container"> /span>
  <button class="button-for-thebooks"> 選擇那一個</button>。
  <button class="button-for-thebooks"> 選擇那一個</button>。
  <button class="button-for-thebooks"> 選擇那一個</button>。
</div>

uj5u.com熱心網友回復：

 <! 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>檔案</title>
    <style>
        . buttons-for-the-books {
            邊框。3px solid #191919;
            背景色：白色。
            高度：42px。
            margin: auto;
            游標: 指標。
        }
    </style>
</head>

<body>
    <div class="center">
        <button class="button-for-the-books" id="testerbuton">選擇那一個</button>
        <button class="button-for-the-books" id="testerbuton2">選擇那一個</button>
        <button class="buttons-for-the-books" id="testerbuton3">Choose that one</button>
    </div>
    <腳本>
        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('button-for-the-books');
        testerbutona.addEventListener('click', function () {
            valueto = "on";
            如果（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";
            如果（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";
            如果（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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/320710.html

標籤：

上一篇：Webpack使用ESM庫的一部分，盡管它需要CommonJS？

下一篇：按鈕onload呼叫函式