如何设置 div onclick 的背景？

Question

我试图在单击时设置 div 的背景，然后再次单击它时它又恢复为无颜色。 这是我的代码：

<div class="wrapper">
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
        <div onclick="set()" id="square"></div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(107, 1fr);
    grid-template-rows: repeat(59, 1fr);
    grid-gap: 0px;

}

.wrapper div {
    padding: 5px;
    background-color: none;
    text-align: center;
    border: 0.001px solid black;
    font-size: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper div:hover {
    background: white;
}

function set() {

    var squares = document.getElementById('square');
    for (var i = 0; i < squares.length; i++) {
        squares[i].style.backgroundColor = "none";
    }

    if (squares[i].style.backgroundColor === "none") {
        squares[i].style.backgroundColor = "white";
    } else {
        squares[i].style.backgroundColor = "none";
    }
}

当我点击 div 时，它什么也没做。 我的 javascript 代码不工作，我应该如何更改它，以便在单击时使 div 背景变为白色，然后再次单击时使 div 背景变为白色。

Answer 1

您可以在监听点击事件的父元素上放置一个事件监听器。 当它获得点击事件时，如果它来自其中一个方块，则切换 class 以保持其背景颜色。 如果它已经有 class，它将被删除。

 document.querySelector('.squares').addEventListener('click', e => { if (e.target.classList.contains('square')) { e.target.classList.toggle('selected'); } });

 .wrapper { display: grid; grid-template-columns: repeat(107, 1fr); grid-template-rows: repeat(59, 1fr); grid-gap: 0px; }.wrapper div { padding: 5px; background-color: none; text-align: center; border: 0.001px solid black; font-size: 24px; display: flex; justify-content: center; align-items: center; }.wrapper.square:hover, .square.selected { background: white; } body { background-color: #888; }

 <div class="wrapper squares"> <div class="square">A</div> <div class="square">B</div> <div class="square">C</div> <div class="square">D</div> <div class="square">E</div> <div class="square">F</div> <div class="square">G</div> </div>

Answer 2

您的主要问题是：

<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>

在多个元素上使用相同的id是无效的。 id必须是唯一的。 所以这一行：

var squares = document.getElementById('square');

只选择第一个div然后稍后，当您尝试遍历所有单元格时，您不会这样做，因为您从来没有首先拥有所有单元格。

您只需要在所有div单元格的父级上设置一个click处理程序。 然后，在该处理程序中，您可以将 CSS class 应用于触发事件的div 。 这称为事件委托，并且之所以有效，是因为事件通过 DOM 冒泡。

 // Get a reference to all the cells let squares = document.querySelectorAll("div.wrapper > div"); // Set up you event handlers in JavaScipt, not with inline HTML // event attributes like onclick document.querySelector(".wrapper").addEventListener("click", function(event) { // Remove all the background colors from all the cells squares.forEach(function(square){ square.classList.remove("activeCell"); }); // Apply backgroun to clicked cell event.target.classList.add("activeCell"); });

 .wrapper { display: grid; grid-template-columns: repeat(107, 1fr); grid-template-rows: repeat(59, 1fr); grid-gap: 0px; }.wrapper > div { padding: 5px; background-color: none; text-align: center; border: 0.001px solid black; font-size: 5px; display: flex; justify-content: center; align-items: center; }.wrapper div:hover { background: green; }.activeCell { background-color:blue; }

 <div class="wrapper"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>