【发布时间】：2021-08-10 08:04:37
【问题描述】：
我仍然是初学者，我正在尝试了解如何更改我的 etch-a-sketch 项目的网格颜色。一些指导会很棒。
我可以让页面的背景改变颜色，我也可以让网格边框改变颜色，但不是网格之间的空间口袋。我也无法锻炼如何留下痕迹。 Css 只允许动画和悬停，不会留下永久的痕迹。所以，我知道一个存储值的函数。
有人可以突出显示我的代码的哪一部分是错误的，为什么它是错误的，如果你有一个我可以阅读的在线资源，这样我就可以创建在每个网格中留下痕迹和改变颜色的功能永远心存感激。
这是我的代码：
//first div
let container = document.createElement('div')
container.setAttribute('id', 'container');
container.classList.add("grid");
document.body.appendChild(container);
//second div
let containerGrid = document.createElement('div')
containerGrid.setAttribute('id', 'containerGrid');
containerGrid.classList.add("grids");
document.body.appendChild(containerGrid);
//button div
let buttonDiv = document.createElement('div')
buttonDiv.setAttribute('id', 'button');
buttonDiv.classList.add("button");
document.body.appendChild(buttonDiv);
//buttons//
const eraserButton = document.createElement('button');
eraserButton.textContent ="Eraser";
eraserButton.classList.add ("Eraser")
eraserButton.setAttribute('id', 'Eraser');
const clearButton = document.createElement('button');
clearButton.classList.add ("Clear")
clearButton.setAttribute('id', 'Clear');
clearButton.textContent ="Clear";
buttonDiv.appendChild(eraserButton);
buttonDiv.appendChild(clearButton);
//hover color event
function random (number) {
return Math.floor(Math.random() * (number +1));
}
const input = document.querySelectorAll('#col');
function rainbowColor () {
const rndCol= 'rgb(' + random(255) + ',' + random(255) +',' + random (255) + ')';
containerGrid.col.style.BackgroundColor = rndCol;
}
input.onmouseover = (rainbowColor);
/*
const inputOne = document.querySelector('#color-picker');
inputOne.addEventListener('mouseover', e => {
e.target.classList.add = ('color-picker');
});
const inputTwo = document.querySelector('#black-pick');
inputTwo.addEventListener('mouseover', e => {
e.target.classList.add = ('black-pick');
});
*/
const btn = document.querySelector('#Eraser');
btn.addEventListener('click', function (e) {
console.log(e);
});
const btnTwo = document.querySelector('#Clear');
btn.addEventListener('click', function (e) {
console.log(e);
});
//make grid 16*16
function makeCols (col) {
for (let i = 0; i < 16; i++) {
const colDivs = document.createElement('div');
colDivs.setAttribute('id', 'col');
colDivs.classList.add('cols');
colDivs.textContent ="";
colDivs.style.border = ('solid');
colDivs.style.display= ('grid');
colDivs.style.padding = ('5px');
containerGrid.appendChild(colDivs);
}
}
makeCols (16);
function makeRows (rows) {
for (let j = 0; j < 16; j++) {
const rowDivs = document.createElement('div');
rowDivs.setAttribute('id', 'rows');
rowDivs.classList.add('rows');
rowDivs.style.border = ('solid');
rowDivs.style.display= ('grid');
rowDivs.style.padding = ('5px');
containerGrid.appendChild(rowDivs);
}
}
makeCols (16);
makeRows(16);.grid {
width:500px;
}
.grids {
display: grid;
justify-content:center;
align-items:center;
grid-template-columns: repeat(8,1fr);
grid-auto-rows:repeat(8, 1fr);
padding: 50px 50px;
margin-left:150px;
height:100px;
width:200px;
}
.rows {
height:10px;
width:10px;
grid-column-gap:10px;
}
.cols {
height:10px;
width:10px;
}
.palette.cols:hover {
background-color:rrggbb;
}
.col {
background-color:black;
}
.rows {
background-color: red, black, blue, yellow, purple, green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id ="color-picker" class = "palette">
<input type="color" name="Rainbow" id="rainbow-colors" value= "#e66465">
<label for="Rainbow">Rainbow</label>
</div>
<div id = "black-pick" class = "black-color">
<input type="color" name="Black" id="black-color" value="#rrggbb">
<label for="Black">Black</label>
</div>
<script src="app.js"></script>
</body>
</html>【问题讨论】：
-
现在对每个元素使用相同的 ID。 IDs 属性应该对每个元素都是唯一的。给他们唯一的 ID：
'col' + i和'rows' + j或'row' + j。
标签： javascript html css