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

Question

我想创建 31 个按钮，并可以选择更改每个按钮的背景颜色。问题是当我尝试更改按钮 2 的颜色时，它会更改按钮 1 的颜色。

我想做的就是图片中的 Cross .

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

body
{
  font-family: Arial, Helvetica, sans-serif;
}
.modal
{
  display:none;
  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, #myBtn2
{
  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:green;
  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:yellow;
  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:red;
  border: none;
  color: white;
  width:60px;
  height:60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

  <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

it changes the color of button 1

这是因为您仅明确提及按钮 1 id。使用 class 代替 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>