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

您在function属性上还添加了onclick和binded和EventListener。

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

创建3个单独的function's来为Div着色。（常规，擦除和随机）

在点击按钮时删除上一个function，并将新的function添加到EventListener。

// 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>

Etch-A-Sketch（JavaScript）随机颜色和擦除功能不起作用

1 个答案: