How to replace a loop for a loop?
Question
I have a grid made with a preset value that I'd like to have a function that replaces it with a grid who's cells are generated with dynamic values gotten from a prompt input. The code for both grids work independently if I were to remove the other's code, but for whatever reason I can't get the 2nd grid to replace the first one when it gets it's value.
Here is an example of my JS code that has the.replaceWith() method attempting to replace the cells of the original grid via div. I'm stumped.
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>2 answers
solution1
0 2022-07-30 22:19:50
As mentioned by @Bergi try using board.replaceChildren() to empty the board first first, and then refill the board like you do in the initial loop.
The cell.replaceWith does not do anything meaningful and can be removed. cell in this scope is the one you create in line 6 of your script, which you never append to the body or do anything else with.
solution2
0 2022-07-30 23:07:56
Problems
Ids must be unique, there are two
#selects (see Figure I ).Don't use ids if you can use class.
Inline event handlers are garbage (see Figure I ).
Figure I
<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 epeat Y ourself. There are two identical blocks of code that generates a grid.
Avoid adding inline styles, use CSS.
Solutions
All ids have been replaced with classes. (see Figure II )
Figure II
const board = document.querySelector('.board'); // Reference class prefix with a dot↗️Replaced inline event handler with an onevent property (see Figure III ).
Figure III
// Onevent property document.querySelector('.select').onclick = enterData; // OR // Event listener document.querySelector('.select').addEventListener('click', enterData);Removed 14 duplicated lines of JavaScript and refactored everything into two functions.
enterData()is triggered by clicking.select, andsetBoard()is called whenenterData()receives a number to pass ontosetBoard().setBoard()is also called after the page has loaded.Replaced 10 lines of JavaScript with 3 CSS rulesets. Inline styles are limiting in that they are not applied globally like CSS stylesheets or
<style>tag. The mouse event handlers were replaced by this:Figure IV
.cell:hover { background: red; }You need to clear
.boardbefore generating a new gridFigure V
board.replaceChildren();Also,
<div>s cannot have avaluepropertyFigure VI
document.getElementById("container").value = a //
Details are commented in example
// 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.