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

您在属性上添加了functiononclick也binded了EventListener。

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

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

删除以前的function并在单击按钮时向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>