用js改变每个按钮的背景颜色

Question

我想创建 31 个按钮，并可以选择更改每个按钮的背景颜色。问题是当我尝试更改按钮 2 的颜色时，它会更改按钮 1 的颜色。我想做的就是在图片 《十字》中。function myFunctionRed()  {    document.getElementById("myBtn").style.background = "green";  }  function myFunctionGreen()  {    document.getElementById("myBtn").style.background = "yellow";  }  function myFunctionBlue()  {    document.getElementById("myBtn").style.background = "red";  }// Get the modalvar modal = document.getElementById("myModal");var modal2 = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");var btn2 = document.getElementById("myBtn2");// Get the <span> element that closes the modal// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modalbtn.onclick = function(){  modal.style.display = "block";}btn2.onclick = function(){  modal.style.display = "block";}// When the user clicks on <span> (x), close the modalspan.onclick = function(){  modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event){  if (event.target == modal)  {    modal.style.display = "none";  }}  <button id="myBtn">1</button>  <button id="myBtn2">2</button>  <div id="myModal" class="modal">    <div class="modal-content">      <span class="close">&times;</span>      <button id="demo1" onclick="myFunctionRed()">Red</button>      <button id="demo2" onclick="myFunctionGreen()">Green</button>      <button id="demo3" onclick="myFunctionBlue()">Blue</button>    </div>  </div>

Answer 1

它改变按钮 1 的颜色

这是因为您仅明确提及按钮 1 id。而不是id先上课然后使用querySelectorAll. 将事件侦听器添加到按钮并从中获取目标意味着获取被单击的按钮。

创建单个函数来更改颜色并将颜色作为函数的参数传递。

var modal = document.getElementById("myModal");

let targetBtn;

document.querySelectorAll('.myBtn').forEach((item) => {

  item.addEventListener('click', (e) => {

    modal.classList.toggle('hide');

    targetBtn = e.target;

  })

})

function myFunction(color) {

  if (targetBtn) {

    targetBtn.style.background = color;

  }

}

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

  modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

  }

}

body {

  font-family: Arial, Helvetica, sans-serif;

}

.modal {

  display: block;

  background: #efefef;

  border: 1px solid black;

  width: 240px;

  height: 100px;

}

.close {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}

.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}

.myBtn {

  background-color: gray;

  border: 0.5px solid black;

  color: white;

  width: 30px;

  height: 30px;

  border-radius: 10%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}

#demo1 {

  background-color: red;

  border: none;

  color: white;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}

#demo2 {

  background-color: green;

  border: none;

  color: white;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}

#demo3 {

  background-color: blue;

  border: none;

  color: white;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

}

.hide {

  display: none;

}

<button class="myBtn">1</button>

<button class="myBtn">2</button>

<div id="myModal" class="modal hide">

  <div class="modal-content">

    <span class="close">&times;</span>

    <button id="demo1" onclick="myFunction('red')">Red</button>

    <button id="demo2" onclick="myFunction('green')">Green</button>

    <button id="demo3" onclick="myFunction('blue')">Blue</button>

  </div>

</div>

Answer 2

您好尝试使用我的代码：

// variable to track which button is activated

var activeButton = null;

function myFunctionRed() {

  document.getElementById(activeButton).style.background = "green";

}

function myFunctionGreen() {

  document.getElementById(activeButton).style.background = "yellow";

}

function myFunctionBlue() {

  document.getElementById(activeButton).style.background = "red";

}

// Get the modal

var modal = document.getElementById("myModal");

var modal2 = document.getElementById("myModal");

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

var btn2 = document.getElementById("myBtn2");

// Get the <span> element that closes the modal

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

btn.onclick = function() {

  modal.style.display = "block";

  // will make sure to return the color to gray

  btn2.style.backgroundColor = "gray";

  // set the value to myBtn

  activeButton = "myBtn";

};

btn2.onclick = function() {

  modal.style.display = "block";

  // will make sure to return the color to gray

  btn.style.backgroundColor = "gray";

  // set the value to myBtn2

  activeButton = "myBtn2";

};

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

  modal.style.display = "none";

};

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

  }

};

Answer 3

所有处理函数都在寻找 id 为myBtn第一个按钮的元素。您需要获取 clickhandler 内部的 dom 事件，解析 targetElement，然后设置该元素的样式。