如何使我的按钮清除内容并创建新网格？

Question

Please guys, I'm working on etch-a sketch project on TOP and I'm stuck on the section where I have to create a button which will clear the current grid and send the user a popup asking for the number of squares per side for the new grid.This is my code below.伙计们，我正在 TOP 上进行 etch-a 草图项目，我被困在我必须创建一个按钮的部分，该按钮将清除当前网格并向用户发送一个弹出窗口，询问每边的方格数对于新网格。这是我下面的代码。 I need help on how to make the button function properly.我需要有关如何正确制作按钮 function 的帮助。 Thank you谢谢

 const container = document.getElementById('container'); let rows = document.getElementsByClassName('gridRow'); let cells = document.getElementsByClassName('cell'); defaultGrid(); //creates a default grid sized 16x16 function defaultGrid() { makeRows(16); makeColums(16); } function makeRows(rowNum) { for(let r = 0; r < rowNum; r++) { let row = document.createElement('div'); container.appendChild(row).className = "gridRow"; } } // creates columns function makeColums(cellNum) { for (i = 0; i < rows.length;i++) { for (j = 0; j < cellNum; j++) { let newCell = document.createElement("div"); rows[j].appendChild(newCell).className = "cell"; } } } for(let i= 0; i < rows.length; i++) { rows[i].addEventListener('mouseover', e => e.target.classList.add('hoverColor')) } for(let i= 0; i < rows.length; i++) { rows[i].addEventListener('mouseout', e => e.target.classList.add('hoverColor3')) } for(let i= 0; i < cells.length; i++) { cells[i].addEventListener('mouseover', e => e.target.classList.add('hoverColor2')) } for(let i= 0; i < cells.length; i++) { cells[i].addEventListener('mouseout', e => e.target.classList.add('hoverColor3')) } const button = document.getElementById('Btn'); button.addEventListener('click', getNewGrid); button.addEventListener('click', theNewGrid); function getNewGrid() { for(let i= 0; i < cells.length; i++) { cells[i].remove(); } for(let i= 0; i < rows.length; i++) { rows[i].remove(); } } function theNewGrid(){ let number= prompt("How many squares per side for the new grid?" ); for(number=0; number<=100; number++) { } getNewGrid(); };

 .gridRow { border: 1px solid black; min-width: 20px; min-height: 20px; display: inline-block; margin-right: 2px; }.cell { border: 1px solid black; min-width: 20px; min-height: 20px; display: inline-block; margin-right: 2px; }.hoverColor { background-color: pink }.hoverColor2 { background-color: blueviolet; }.hoverColor3 { background-color: white; transition:3s; } #Btn { margin-bottom: 50px; margin-top: 20px; }

 <,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= "etch.css"> </head> <body> <button id = "Btn">New Grid</button> <div id = 'container'></div> </body> </html>

Answer 1

i tried to edit your post first because the indentation was making it hard to read.我尝试先编辑您的帖子，因为缩进使其难以阅读。 the edit has to be approved by the community so i'm pasting my edits below, but this time i'm adding comments and potentially the solution:编辑必须得到社区的批准，所以我将我的编辑粘贴在下面，但这次我要添加评论并可能是解决方案：

 const container = document.getElementById('container'); let rows = document.getElementsByClassName('gridRow'); let cells = document.getElementsByClassName('cell'); createGrid(); //creates a grid sized 16x16 by default function createGrid(size = 16) { makeRows(size); } function makeRows(size) { for(let r = 0; r < size; r++) { let row = document.createElement('div'); container.appendChild(row).className = "gridRow"; row.addEventListener('mouseover', e => e.target.classList.add('hoverColor')); row.addEventListener('mouseout', e => e.target.classList.add('hoverColor3')) makeColumns(row, size); } } // creates columns function makeColumns(row, cellNum) { for (j = 0; j < cellNum; j++) { let newCell = document.createElement("div"); newCell.addEventListener('mouseover', e => e.target.classList.add('hoverColor2')); newCell.addEventListener('mouseout', e => e.target.classList.add('hoverColor3')); row.appendChild(newCell).className = "cell"; } } const button = document.getElementById('Btn'); // button.addEventListener('click', getNewGrid); // not here button.addEventListener('click', theNewGrid); function getNewGrid() { container.innerText = ''; // clear everything } function theNewGrid(){ getNewGrid(); let number = prompt("How many squares per side for the new grid?" ); // below for loop does nothing // for(number=0; number<=100; number++) { // } createGrid(number); // pass the number as an argument };

 .gridRow { min-width: 20px; min-height: 20px; margin-right: 2px; }.cell { border: 1px solid black; min-width: 20px; min-height: 20px; display: inline-block; margin-right: 2px; }.hoverColor { background-color: pink }.hoverColor2 { background-color: blueviolet; }.hoverColor3 { background-color: white; transition:3s; } #Btn { margin-bottom: 50px; margin-top: 20px; }

 <,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= "etch.css"> </head> <body> <button id="Btn">New Grid</button> <div id="container"></div> </body> </html>

如何使我的按钮清除内容并创建新网格？

问题描述

1 个解决方案

解决方案1
0 2022-02-02 11:54:26

如何使我的按钮清除内容并创建新网格？

问题描述

1 个解决方案

解决方案1 0 2022-02-02 11:54:26

解决方案1
0 2022-02-02 11:54:26