Question

我有两个红色按钮。如果单击按钮，则颜色应更改为绿色。如果再次单击，它将返回到红色。现在，我成功更改了第一个按钮的颜色，但没有更改第二个按钮的颜色。有人知道吗？

我已经有一个Java脚本来更改一个按钮的颜色

var button = document.querySelector("button");

button.addEventListener("click", function() {
  const curColour = button.style.backgroundColor;

  if (curColour === 'red') {
    button.style.backgroundColor = "green";
  } else {
    button.style.backgroundColor = "red";
  }
});

button {
  height: 40px;
  width: 160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color: red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button1 {
  background: red
}

.button1:hover {
  background-color: green;
}

<button id="bGeneral" class="button1" name="bGeneral"><b>General</b></button>
<!-- Create extra space -->
<p><br></p>
<!-- The Next Button Plates -->
<button id="buttonP" class="button1" name="buttonP"><b>Plates</b></button>

期望能够更改两个按钮的颜色

Answer 1

您可以使用toggleClass。同时使用querySelectorAll，这将显示所有按钮。然后迭代此集合并向其添加事件侦听器。。内部回调函数使用classList.toggle添加或删除类

var button = [...document.querySelectorAll("button")].forEach((item) => {
  item.addEventListener("click", function() {
    this.classList.toggle('toggleButtonColor')
  });

})

button {
  height: 40px;
  width: 160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color: red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button1 {
  background: red
}

.button1:hover {
  background-color: green;
}

.toggleButtonColor {
  background: green;
}

<body style="background-color:#E3CEF6;">

  <button id="bGeneral" class="button1" name="bGeneral"><b>General</b></button>
  <!-- Create extra space -->
  <p><br></p>
  <!-- The Next Button Plates -->
  <button id="buttonP" class="button1" name="buttonP"><b>Plates</b></button>
</body>

Answer 2

您正在使用两种不同的方式来处理点击。使用onclick或addEventListener。这是一个例子。

我还没有完善您的功能。看看opti的@brk答案

function showOrHide(id, name) {
  const button = document.getElementById(id);

  const curColour = button.style.backgroundColor;
  
  if (curColour === 'red' || !curColour) {
    button.style.backgroundColor = 'green';
  } else {
    button.style.backgroundColor = 'red';
  }
}

button {
  height: 40px;
  width: 160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color: red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button1 {
  background-color: red;
}

.button1:hover {
  background-color: green;
}

body {
  background-color: #E3CEF6
}

<button id="bGeneral" onclick="showOrHide(this.id, 'General')" class="button1" name="bGeneral">
<b>General</b></button>
<!-- Create extra space -->
<p><br></p>

<!-- The Next Button Plates -->
<button id="buttonP" onclick="showOrHide(this.id, 'Plates')" class="button1" name="buttonP"><b>Plates</b></button>

Answer 3

您可以使用id：

function showOrHide(id) {
  var element = document.getElementById(id);
  const curColour = element.style.backgroundColor;
  if (curColour === 'red') {

        element.style.backgroundColor = "green";
    }
    else {
        element.style.backgroundColor = "red";
    }
}

和HTML：

<button  id="bGeneral" onclick="showOrHide(this.id)" class="button1"  name= "bGeneral" ><b>General</b></button> 
  <!-- Create extra space -->
<p><br></p> 
<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide(this.id)" class="button1" name= "buttonP" ><b>Plates</b></button>

Answer 4

正如安德里亚斯（Andreas）在评论中所说。您需要querySelectorAll而不是querySelector。这将为您提供一个必须循环浏览的集合

var buttons = document.querySelectorAll("button");
for (const button of buttons) {
    // ...
}

var buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", function() {
    const curColour = button.style.backgroundColor;

    if (curColour === 'red') {
      button.style.backgroundColor = "green";
    } else {
      button.style.backgroundColor = "red";
    }
  });
}

button {
  height: 40px;
  width: 160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color: red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button1 {
  background: red
}

.button1:hover {
  background-color: green;
}

<button id="bGeneral" class="button1" name="bGeneral"><b>General</b></button>
<!-- Create extra space -->
<p><br></p>
<!-- The Next Button Plates -->
<button id="buttonP" class="button1" name="buttonP"><b>Plates</b></button>

Answer 5

这是处理您想法的正确方法

<!DOCTYPE html>
    <html>
    <head>
     <style>
    button {
      height:40px;
      width:160px;
      border: 4px;
      border-radius: 20px 20px 20px 20px;
      border-color:red;
      color: yellow;
      padding: 12px 15px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    .button1 { background: red }

    .button1:hover {
      background-color: green;
    }

    </style>
    </head>
     <body onload="beginfase()" style="background-color:#E3CEF6;" >

    <button  id="bGeneral" onclick="" class="button1"  name= "bGeneral" ><b>General</b></button> 
      <!-- Create extra space -->
    <p><br></p> 
    <!-- The Next Button Plates -->
    <button id = "buttonP" onclick="" class="button1" name= "buttonP" ><b>Plates</b></button> 

    <script type="text/javascript">
    //we are creating an array
    var button = [];
    button = document.querySelectorAll("button");
    //we are binding the function to all the elements of the array
    for(i=0;i<button.length;i++){
        button[i].onclick = function(){
    // this represent the elemement which is being clicked
          if(this.style.backgroundColor === "red"){
            this.style.backgroundColor = "green"
          }
          else{
          this.style.backgroundColor = "red"
          }

        }
    }

    </script>
      </body>

Answer 6

尝试使用onclick方法，然后使用querySelectorAll选择所有按钮

HTML

<button  id="bGeneral" onclick="changeColor(this)" class="button1"  name= "bGeneral" ><b>General</b></button> 
      <!-- Create extra space -->
    <p><br></p> 
    <!-- The Next Button Plates -->
    <button id = "buttonP" onclick="changeColor(this)" class="button1" name= "buttonP" ><b>Plates</b></button>

JS

function changeColor (value) {
    var buttons = document.querySelectorAll(".button1");
    let color = value.style.backgroundColor;
    for (let i = 0; i < buttons.length; i++) {
      if (color === 'red') {
        buttons[i].style.backgroundColor = 'green'
      } else {
        buttons[i].style.backgroundColor = 'red'
      }
    }
  }

用Java脚本更改颜色第二个按钮

6 个答案: