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

您在onclick属性上添加的function还将它们与EventListener binded在一起。

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

创建3个独立的function's为Div着色。 ) （ ）

删除上一个function并在OnClicking Button的同时将新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>