javascript - Etch-A-Sketch(JavaScript) 随机颜色和删除功能不起作用

Question

我正在学习 JavaScript 以及如何通过使用 JavaScript eventListeners 而不是使用任何 jQuery 来操作 DOM。我已经设法走到这一步，无法直接思考如何应用随机颜色和删除功能来工作。我知道我在某个地方搞砸了。当我点击随机颜色时，我应该能够填充随机 rgba，如果我点击删除，我应该只能删除我选择的框，它应该恢复为灰色。

非常感谢您对我如何解决此问题的反馈。非常感谢。

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

const resetButton = document.querySelector("#reset");
const eraseButton = document.querySelector("#erase");
const randomColor = document.querySelector("#color");

let boxes = 16;
createGrid(boxes);

function createGrid(boxes){
    for(i=0; i<boxes*boxes; i++){
        const div = document.createElement('div');
        div.setAttribute=('id', 'box');
        div.style.width = 450/boxes + 'px';
        div.style.height = 450/boxes + 'px';
        div.style.margin = '0px';
        div.style.padding = '0px';
        div.style.display = 'inline-block';
        div.style.border = '2px solid black';
        div.style.backgroundColor = 'grey';
        container.appendChild(div);

        //event listeners
        div.addEventListener("mouseover", function(event){
            this.style.backgroundColor = 'orange';
            // console.log(this);
            this.style.boxShadow = '0 0 8px rgba(0,0,0,0.6)';
            this.style.borderColor = 'blue';
        });

        div.addEventListener("mouseover", function(event){
            this.style.backgroundColor = color;
            console.log(this);
        })
    }
}

// reset the grid to original status
function resetGrid(){
    while(container.firstChild){
        container.removeChild(container.firstChild);
    }
}

//event listeners to reset the grid
resetButton.addEventListener("click", () =>{
    resetGrid();
    createGrid(boxes);
});

// event listeners to clear 1 or more grids not working
eraseButton.addEventListener("click", () => {
    this.style.backgroundColor = "grey";
});

//event listeners to pick random color
randomColor.addEventListener("click", () =>{
    let color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    this.style.backgroundColor = color;
    console.log(this);
});

<h1>Etch-A-Sketch</h1>
    <div id="container"></div>
    
            <button class="btn btn-primary" onclick="resetGrid()" id="reset">RESET</button>
            <button class="btn btn-primary" onclick="eraseGrid()" id="erase">ERASE</button>
            <button class="btn btn-primary" onclick="randomColor()" id="color">RANDOM COLOR </button>

Answer 1

You added function on onclick attribute also binded them with EventListener.

将当前 function 保存在变量中，这有助于将其从 EventListener 中删除。

为 Div 着色创建 3 个单独的函数。 (常规、删除和随机)

删除以前的 function 并在 OnClicking Button 的 EventListener 中添加新的 function。

// constant variables
const container = document.getElementById("container");

const resetButton = document.querySelector("#reset");
const eraseButton = document.querySelector("#erase");
const randomColor = document.querySelector("#color");

// functions to Color Div's
var regular_coloring = function()
{
    (this).style.backgroundColor = 'orange';
    (this).style.boxShadow = '0 0 8px rgba(0,0,0,0.6)';
    (this).style.borderColor = 'blue';
}
var erase_coloring = function()
{
    (this).style.backgroundColor = 'grey';
    (this).style.boxShadow = '0 0 0 rgba(0,0,0,0)';
    (this).style.borderColor = 'black';
}
var random_coloring = function()
{
    (this).style.backgroundColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    (this).style.boxShadow = '0 0 8px rgba(0,0,0,0.6)';
    (this).style.borderColor = 'blue';
}

// set current function and create Grid
let currentFunction = regular_coloring;

let boxes = 16;
createGrid(boxes);

function createGrid(boxes)
{
    currentFunction = regular_coloring;
    for(i=0; i<boxes*boxes; i++)
    {
        const div = document.createElement('div');
        div.setAttribute('data-type', 'box');
        div.style.width = 450/boxes + 'px';
        div.style.height = 450/boxes + 'px';
        div.style.margin = '0px';
        div.style.padding = '0px';
        div.style.display = 'inline-block';
        div.style.border = '2px solid black';
        div.style.backgroundColor = 'grey';
        container.appendChild(div);

        //event listeners
        div.addEventListener("mouseover", currentFunction);
        if((i + 1) % 16 === 0 )
        {
            br_tag = document.createElement('br');
            container.appendChild(br_tag);
        }
    }
}


// reset the grid to original status
function resetGrid(){
    while(container.firstChild){
        container.removeChild(container.firstChild);
    }
}

// event listeners to reset the grid
resetButton.addEventListener("click", () =>{
    resetGrid();
    createGrid(boxes);
});

// event listeners to clear grid
eraseButton.addEventListener("click", () => {
    myDivs = document.querySelectorAll('[data-type=box]');
    for (var i = 0; i < myDivs.length; i++)
    {
        myDivs[i].removeEventListener('mouseover', currentFunction);
        myDivs[i].addEventListener('mouseover', erase_coloring);
    }
    currentFunction = erase_coloring;
});

//event listeners for random color
randomColor.addEventListener("click", () => {
    myDivs = document.querySelectorAll('[data-type=box]');
    for (var i = 0; i < myDivs.length; i++)
    {
        myDivs[i].removeEventListener('mouseover', currentFunction);
        myDivs[i].addEventListener('mouseover', random_coloring);
    }
    currentFunction = random_coloring;
});

<div><span>Etch-A-Sketch</span>
<button class="btn btn-primary" id="reset">Reset</button>
<button class="btn btn-primary" id="erase">Erase</button>
<button class="btn btn-primary" id="color">Random</button></div><br>
<div id="container"></div>