用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 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";

}

btn2.onclick = function()

{

  modal.style.display = "block";

}

// 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";

  }

}

  <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) => {&nbsp; item.addEventListener('click', (e) => {&nbsp; &nbsp; modal.classList.toggle('hide');&nbsp; &nbsp; targetBtn = e.target;&nbsp; })})function myFunction(color) {&nbsp; if (targetBtn) {&nbsp; &nbsp; targetBtn.style.background = color;&nbsp; }}// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks on <span> (x), close the modalspan.onclick = function() {&nbsp; modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {&nbsp; if (event.target == modal) {&nbsp; &nbsp; modal.style.display = "none";&nbsp; }}body {&nbsp; font-family: Arial, Helvetica, sans-serif;}.modal {&nbsp; display: block;&nbsp; background: #efefef;&nbsp; border: 1px solid black;&nbsp; width: 240px;&nbsp; height: 100px;}.close {&nbsp; color: #aaaaaa;&nbsp; float: right;&nbsp; font-size: 28px;&nbsp; font-weight: bold;}.close:hover,.close:focus {&nbsp; color: #000;&nbsp; text-decoration: none;&nbsp; cursor: pointer;}.myBtn {&nbsp; background-color: gray;&nbsp; border: 0.5px solid black;&nbsp; color: white;&nbsp; width: 30px;&nbsp; height: 30px;&nbsp; border-radius: 10%;&nbsp; text-align: center;&nbsp; text-decoration: none;&nbsp; display: inline-block;&nbsp; font-size: 16px;}#demo1 {&nbsp; background-color: red;&nbsp; border: none;&nbsp; color: white;&nbsp; width: 60px;&nbsp; height: 60px;&nbsp; border-radius: 50%;&nbsp; text-align: center;&nbsp; text-decoration: none;&nbsp; display: inline-block;&nbsp; font-size: 16px;}#demo2 {&nbsp; background-color: green;&nbsp; border: none;&nbsp; color: white;&nbsp; width: 60px;&nbsp; height: 60px;&nbsp; border-radius: 50%;&nbsp; text-align: center;&nbsp; text-decoration: none;&nbsp; display: inline-block;&nbsp; font-size: 16px;}#demo3 {&nbsp; background-color: blue;&nbsp; border: none;&nbsp; color: white;&nbsp; width: 60px;&nbsp; height: 60px;&nbsp; border-radius: 50%;&nbsp; text-align: center;&nbsp; text-decoration: none;&nbsp; display: inline-block;&nbsp; font-size: 16px;}.hide {&nbsp; display: none;}<button class="myBtn">1</button><button class="myBtn">2</button><div id="myModal" class="modal hide">&nbsp; <div class="modal-content">&nbsp; &nbsp; <span class="close">&times;</span>&nbsp; &nbsp; <button id="demo1" onclick="myFunction('red')">Red</button>&nbsp; &nbsp; <button id="demo2" onclick="myFunction('green')">Green</button>&nbsp; &nbsp; <button id="demo3" onclick="myFunction('blue')">Blue</button>&nbsp; </div></div>

Answer 2

您好尝试使用我的代码：// variable to track which button is activatedvar activeButton = null;function myFunctionRed() {&nbsp; document.getElementById(activeButton).style.background = "green";}function myFunctionGreen() {&nbsp; document.getElementById(activeButton).style.background = "yellow";}function myFunctionBlue() {&nbsp; document.getElementById(activeButton).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() {&nbsp; modal.style.display = "block";&nbsp; // will make sure to return the color to gray&nbsp; btn2.style.backgroundColor = "gray";&nbsp; // set the value to myBtn&nbsp; activeButton = "myBtn";};btn2.onclick = function() {&nbsp; modal.style.display = "block";&nbsp; // will make sure to return the color to gray&nbsp; btn.style.backgroundColor = "gray";&nbsp; // set the value to myBtn2&nbsp; activeButton = "myBtn2";};// When the user clicks on <span> (x), close the modalspan.onclick = function() {&nbsp; modal.style.display = "none";};// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {&nbsp; if (event.target == modal) {&nbsp; &nbsp; modal.style.display = "none";&nbsp; }};

Answer 3

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