如何用循環替換循環？

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