javascript - Etch-A-Sketch(JavaScript) 随机颜色和擦除功能不起作用
问题描述
我正在学习 JavaScript 以及如何使用 JavaScript eventListeners 来操作 DOM,而不是使用任何 jQuery。我已经走到了这一步,无法直接思考如何应用随机颜色和擦除功能来工作。我知道我在某个地方搞砸了。当我单击随机颜色时,我应该能够填充随机 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>
解决方案
您还使用. 添加
function
了onclick
属性。binded
EventListener
将 Current 保留function
在变量中,这有助于将其从EventListener
.
创建 3 个单独function's
的用于为 Div 着色。(常规,擦除和随机)
删除以前的并在 OnClicking 按钮时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>
推荐阅读
- reactjs - 如何使用 react-sortable-tree 使节点不可拖动
- php - 在 php curl 中仅显示 1 条数据
- javascript - 尝试删除 Redux ToDo 应用程序中的状态但无法正常工作
- sharing - 在android 10中共享图像,我应该迁移到范围存储
- html - SVG 和主要内容之间的奇怪间距
- wordpress - 使 WooCommerce 缩略图图像大于主要产品图像
- python-3.x - 需要帮助解决 python 中的 selenium webdriver
- monads - 无法声明 MonadPlus 接口受 Monad 约束
- php - 使用标签的可见文本替换 qualifying 的 href 值
- c++ - 如何安全地重载 std::unique_ptr 的自定义删除器?