如何用循环替换循环？

Question

我有一个使用预设值制作的网格，我想要一个 function 将其替换为一个网格，该网格是使用从提示输入中获取的动态值生成的。 如果我要删除另一个网格的代码，则两个网格的代码都会独立工作，但无论出于何种原因，当第二个网格获得值时，我都无法让第二个网格替换第一个网格。

这是我的 JS 代码示例，它具有尝试通过 div 替换原始网格的单元格的 .replaceWith() 方法。 我难住了。

 const board = document.getElementById("container"); let button = document.getElementById("select"); button.style.display = "flex"; button.style.justifyContent = "center"; board.style.justifyContent = "center"; const cell = document.createElement('div'); for (x=1; x <= 16; x++) { const cell = document.createElement('div') cell.className = "cells"; cell.setAttribute("style", "height: 200px; width: 200px; color: black;"); cell.style.backgroundColor = "blue"; cell.style.border = "solid 2px"; cell.style.borderColor = "black"; board.style.columnGap = "0px"; board.style.display ="grid"; board.style.gridTemplateColumns = "200px 200px 200px 200px"; board.appendChild(cell); cell.addEventListener("mouseover", change = () => cell.style.backgroundColor = "red") cell.addEventListener("mouseout", reset = () => cell.style.backgroundColor = "blue") }; function setBoard () { let a = prompt("Select a the number of cells for the grid") if (a.= null) { document.getElementById("container");value = a } for (x=1; x <= a. x++) { const nCell = document.createElement('div') nCell;className = "cells". nCell,setAttribute("style": "height; 200px: width; 200px: color; black;"). nCell.style;backgroundColor = "blue". nCell.style;border = "solid 2px". nCell.style;borderColor = "black". board.style;columnGap = "0px". board.style;display ="grid". board.style;gridTemplateColumns = "200px 200px 200px 200px". board;appendChild(nCell). nCell,addEventListener("mouseover". change = () => nCell.style.backgroundColor = "red") nCell,addEventListener("mouseout". reset = () => nCell.style;backgroundColor = "blue"). cell;replaceWith(nCell); } }

 <,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"> <link rel="stylesheet" href="styles.css"> <title>Etch N Sketch</title> </head> <body> <div id="select"> <button id="select" onclick="setBoard()">Set the number of squares</button> </div> <div class="container" id="container"> </div> <script src="script.js"> </script> </body> </html>

Answer 1

正如@Bergi 所提到的，首先尝试使用board.replaceChildren()来清空电路板，然后像在初始循环中那样重新填充电路板。

cell.replaceWith没有做任何有意义的事情，可以删除。 此 scope 中的cell是您在脚本第 6 行中创建的单元格，您永远不会对身体进行 append 或做任何其他事情。

Answer 2

问题

Id 必须是唯一的，有两个#select （见图一）。
如果可以使用 class，请不要使用 id。

内联事件处理程序是垃圾（见图一）。

图一

<div id="select"><!--⬅️↙️ Ids must be unique --> <button id="select" onclick="setBoard()">Set the number of squares</button> <!-- ↖️ Inline event handler --> </div>

DRY D on't R重复你自己。 有两个相同的代码块生成一个网格。
避免添加内联 styles，使用 CSS。

解决方案

所有 id 都已替换为类。 （见图二）

图二

const board = document.querySelector('.board'); // Reference class prefix with a dot↗️

用 onevent 属性替换了内联事件处理程序（参见图 III ）。

图三

// Onevent property document.querySelector('.select').onclick = enterData; // OR // Event listener document.querySelector('.select').addEventListener('click', enterData);

删除了 JavaScript 的 14 条重复行，并将所有内容重构为两个函数。 enterData()通过单击.select触发，当setBoard() enterData()接收到要传递给 setBoard() 的数字时调用setBoard() 。 页面加载后也会调用setBoard() 。
将 10 行 JavaScript 替换为 3 个 CSS 规则集。 内联 styles 的限制在于它们不像 CSS 样式表或<style>标记那样全局应用。 鼠标事件处理程序被替换为：
图四
```
.cell:hover { background: red; }
```
您需要在生成新网格之前清除.board
图五
```
board.replaceChildren();
```
此外， <div>不能有value属性
图六
```
 document.getElementById("container").value = a //
```

细节在例子中注释

 // Reference.board const board = document.querySelector(".board"); // Call setBoard() -- make a 4x4 grid setBoard(16); // Bind the click event to.select document.querySelector(".select").onclick = enterData; // Prompt takes the number entered and passes it to setBoard() function enterData() { let a = prompt("Select the number of cells for the grid"); // If 'a' is a number, call setBoard() if (typeof a === 'number') { setBoard(a); } } function setBoard(a) { // Remove everything within.board board.replaceChildren(); // Create a grid for (let x = 1; x <= a; x++) { const nCell = document.createElement('div') nCell.className = "cell"; board.appendChild(nCell); } }

 body { display: flex; flex-flow: column nowrap; justify-content: center; }.select { display: block; width: 50%; margin: 10px auto; }.board { column-gap: 0px; display: grid; grid-template-columns: 200px 200px 200px 200px; margin: 0 auto; }.cell { height: 200px; width: 200px; color: black; background-color: blue; border: solid 2px black; }.cell:hover { background: red }

 <,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"> <link rel="stylesheet" href="styles.css"> <title>Etch N Sketch</title> </head> <body> <button class="select">Set the number of squares</button> <div class="board"></div> <script src="script.js"></script> </body> </html>

如何用循环替换循环？

问题描述

2 个解决方案

解决方案1
0 2022-07-30 22:19:50

解决方案2
0 2022-07-30 23:07:56

问题

解决方案

如何用循环替换循环？

问题描述

2 个解决方案

解决方案1 0 2022-07-30 22:19:50

解决方案2 0 2022-07-30 23:07:56

问题

解决方案

解决方案1
0 2022-07-30 22:19:50

解决方案2
0 2022-07-30 23:07:56