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

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

我已经有一个 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>

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

您可以使用

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>

正如安德烈亚斯在评论中已经说过的那样。你需要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>

您使用两种不同的方法来处理点击。使用 onclick 或 addEventListener 。下面是一个示例。

我没有改进你的功能内部。看看@brk opti 的答案

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>

你可以使用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>

这是你的想法的正确方式

<!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>

尝试使用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'
      }
    }
  }

相关内容

最新更新

热门标签：