时间戳

首页 > 解决方案 > 如何清除应用背景颜色的 div 元素的 javascript 生成网格

javascript - 如何清除应用背景颜色的 div 元素的 javascript 生成网格

问题描述

在我的程序中，我正在生成一个字段网格并为它们分配“grid-item”的类名。我有一个用于鼠标悬停的事件侦听器。当鼠标悬停时，相应“网格项”的背景颜色应用了新的背景颜色。

我正在尝试制作一个清晰的按钮，将所有这些背景颜色重置为“”，但我不断收到错误“未捕获的 TypeError：无法设置未定义的属性（设置'backgroundColor'）”并且不知所措。

我相信我的问题在于我的 onClick 函数无法找到“网格项”。

谁能在没有明确给出答案的情况下指出我正确的方向？

javascript

const container = document.getElementById("container");

function makeRows(rows, cols) {
    container.style.setProperty('--grid-rows', rows);
    container.style.setProperty('--grid-cols', cols);
    for (c = 0; c < (rows * cols); c++) {
        let cell = document.createElement("div");
        cell.addEventListener("mouseover", function(event){
            event.target.style.backgroundColor = "orange";
        } )
        container.appendChild(cell).className = "grid-item";    
        
        }
             

    };


    let clear = document.getElementById("clearBtn");
    clear.onclick = function(){
        document.getElementsByClassName('grid-item').style.backgroundColor = "";
    }

makeRows(16, 16);

HTML 文件中的按钮声明

<button id = "clearBtn">Clear</button>

标签： javascripthtml

解决方案

document.getElementsByClassName('grid-item')返回元素数组，因此您不能使用.style其中的属性。

更新代码： https ://jsfiddle.net/4r18o97v/1/

let clear = document.getElementById("clearBtn");
    clear.onclick = function(){
     var elements = document.getElementsByClassName('grid-item');
        for (var i = 0; i < elements.length; i++) {

          elements[i].style.backgroundColor = "";

      }
    }

推荐阅读