我试图让 5x5 网格上的单元格在单击时更改为随机颜色。我在单击时无法更改它们。我不确定如何使非按钮可点击，也不确定如何在一个语句中定位多个 id，而不是执行 25 次。我尝试使用第一个方块来测试它，并且可以正确链接它。我尝试通过第一个 id 获取元素，并使用单击和更改颜色功能添加事件侦听器。我几乎肯定这是我的问题。当我这样做时，我的整个网格都会消失。
html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>YOUR title here</title>
<meta name="description" content="brief description of YOUR page here">
<meta name="keywords" content="keywords related to YOUR page here">
<meta name="author" content= "YOUR name here">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="grid.js" defer></script>
<link rel="stylesheet" href="grid.css"/>
</head>
<body>
<div class="grid_container"></div>
<div>
<button id="reset">Reset Grid</button>
</div>
</body>
</html>
................................................ ...................................................... .... JavaScript //将元素链接到脚本
document.getElementById('reset').addEventListener('click', reset);
document.getElementById('sqr0').addEventListener('click', change_color);
//function to create the grid cells
function create_grid(rows, cols){
const grid_container = document.getElementsByClassName('grid_container')[0];
for (let i = 0; i < rows; i++){
for(let j = 0; j < cols; j++){
const square = document.createElement('div');
square.classList.add('square');
grid_container.appendChild(square);
}
}
}
create_grid(5,5);
//function to assign unique id's to each square
function id(){
//targeting the grid div element, then the squares
const grid_div = document.querySelector('.grid_container');
const grid_cell = grid_div.querySelectorAll('.square');
//loop to create a unique id on each square
for (let i = 0; i < grid_cell.length; i++)
grid_cell[i].id = "sqr" + i;
}
id();
//function to reset
//just refreshing the entire page
function reset() {
location.reload();
}
//function to generate a random color
//used https://css-tricks.com/ to help with generating random color
function get_random_color(){
let random_color = math.floor(math.random()*16777215).tostring(16);
return;
}
//function to change the background to a random color
function change_color(){
element.style.backgroundColor = get_random_color();
}
......................................................................................................
css
/*making the grid container*/
.grid_container {
display: grid;
grid-template-columns: repeat(5, 50px);
grid-template-rows: repeat(5, 50px);
gap: 1px;
}
.square {
aspect-ratio: 1;
border: 1px solid black;
background-color: white;
}
检查一下为 div 添加点击事件
function create_grid(rows, cols) {
const grid_container = document.getElementsByClassName('grid_container')[0];
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const square = document.createElement('div');
square.classList.add('square');
grid_container.appendChild(square);
square.addEventListener('click', change_color); // Add event listener here
}
}
}
function get_random_color() {
const random_color = Math.floor(Math.random() * 16777215).toString(16);
return `#${random_color.padStart(6, '0')}`; // Ensures color has 6 characters
}
// Function to change the background to a random color
function change_color(event) {
event.target.style.backgroundColor = get_random_color();
}
这里使用数字16777215，因为它代表十六进制格式的24位颜色的最大值，这是CSS中RGB颜色的标准。