css 按钮更改最新的div项，而不是正确的

0kjbasz6 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(163)

我创建了一个div表，其中有一个按钮，该按钮创建了一个框，应该发生的是，您可以单击任何{x}个框，它将其着色为黑色。然而，它不是将该框着色为黑色（或白色），而是将最新的框着色为黑色（或白色）。我该如何更改此设置？
超文本标记语言：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Rule 110</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <script src="script.js"></script>
  <center><h1>Rule 110</h1></center>
  <div class="grid-container">
  
    <main id="content"></main>
  
  
  </div>
  <button onclick=add() class="button">+</button>
</body>
</html>

JavaScript语言：

const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const fourth = document.getElementById("fourth")
const fifth = document.getElementById("fifth")
const sixth = document.getElementById("sixth")
const seventh = document.getElementById("seventh")
const eigth = document.getElementById("eigth")
const ninth = document.getElementById("ninth")
var extra = 1;
var thingrowx=0;
var thingrowy = 1;
function changeColor(test) {
  if (document.getElementById(test).className === "grid-item-white"){
    document.getElementById(test).className="grid-item-black";}
  else {
    document.getElementById(test).className="grid-item-white";
  }
}
function createTable() {
  rn = window.prompt("Input number of rows", 1);
  cn = window.prompt("Input number of columns",1);
  
   for(var r=0;r<parseInt(rn,10);r++)
  {
   var x=document.getElementById('myTable').insertRow(r);
   for(var c=0;c<parseInt(cn,10);c++)  
    {
     var y=  x.insertCell(c);
     y.innerHTML="Row-"+r+" Column-"+c; 
    }
   }
}
function repeat(func, times) {
    func;
    times && --times && repeat(func, times);
}
function test() {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="grid-item-white" id="combined"   onclick=changeColor('combined')>
      </div>`
    )
}
function add() {
  extra += 1;
  thingrowx += 1;
  var combined = "(" + thingrowx + "," + thingrowy + ")"
  alert(combined)
  repeat(test(), thingrowy) 
}

CSS：

.button {
  border: none;
  background-color: black;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
}
.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 0px 50px 50px 50px 0px 50px 50px 50px 50px 50px 50px 50px;
  padding: 10px;
}
.grid-item-white {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.grid-item-black {
  background-color: black;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  color: white
}
body {background-color: #cdf1eb ;}

css

来源：https://stackoverflow.com/questions/73160444/button-changing-newest-div-item-instead-of-the-correct

2条答案

按热度按时间

tyky79it1#

我认为问题出在test函数上。

function test() {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="grid-item-white" id="combined"   onclick=changeColor('combined')>
      </div>`
    )
}

对于每个新添加的元素，将id设置为"combined"。但是id对于整个html文档中的每个元素都必须是唯一的。你可能打算做以下事情。

function test(combined) {
  // use the combined index that is passed from the add function
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    // -------------------------------vvvvvvvvvvv-- use template literal
    `<div class="grid-item-white" id="${combined}"   onclick=changeColor('${combined}')>
      </div>`
    )
}
function add() {
  extra += 1;
  thingrowx += 1;
  var combined = "(" + thingrowx + "," + thingrowy + ")"
  alert(combined)
  repeat(test(combined), thingrowy) // pass the combined index to the test method
}

您的代码非常混乱，命名不当，还有许多未使用的变量和函数，因此我尝试了一点重构！

const contentElement = document.getElementById("content");
contentElement.addEventListener("click", (event) => {
  // here event.target represents the element that has been clicked on
  changeColor(event.target);
});
let rowX = 0;
let rowY = 1;
function changeColor(element) {
  if (element.className === "grid-item-white")
    element.className = "grid-item-black";
  else element.className = "grid-item-white";
}
function add() {
  rowX += 1;
  const combined = "(" + rowX + "," + rowY + ")";
  // alert(combined);
  document
    .querySelector("#content")
    .insertAdjacentHTML(
      "afterbegin",
      `<div class="grid-item-white" data-id="${combined}"></div>`
    );
}

.button {
  border: none;
  background-color: black;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}
.button1:hover {
  background-color: #4caf50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008cba;
}
.button2:hover {
  background-color: #008cba;
  color: white;
}
.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 0px 50px 50px 50px 0px 50px 50px 50px 50px 50px 50px 50px;
  padding: 10px;
}
.grid-item-white {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.grid-item-black {
  background-color: black;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  color: white;
}
body {
  background-color: #cdf1eb;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Rule 110</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <center>
    <h1>Rule 110</h1>
  </center>
  <button onclick="add()" class="button">+</button>
  <div class="grid-container">
    <main id="content"></main>
  </div>
  <script src="script.js"></script>
</body>
</html>

在这里，我使用了事件委托来监听任何网格项上的单击事件。因此，如果我们监听#content元素上的点击事件并使用event.target，那么我们就会得到被点击的网格项。然后我们可以将该元素传递给changeColor方法。

展开查看全部

赞(0）回复(0）举报 2023-10-21

wlwcrazw2#

我认为这是因为你所有的div都有相同的id（“combined”），所以浏览器会得到DOM中最上面的一个。如果你给予他们每个人一个唯一的id，这个问题就可以解决。这对我很有效：

`<div class="grid-item-white" id="combined${extra}" onclick=changeColor('combined${extra}')`

赞(0）回复(0）举报 2023-10-21

我来回答

css 按钮更改最新的div项，而不是正确的

2条答案

相关问题

热门标签

最新问答