如何設置 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>