Estoy tratando de crear un proyecto de Etch-a-Sketch, iba bien (creo) hasta que comencé a crear una función que aplica otro tamaño a mi elemento de cuadrícula, ¿cómo puedo hacer que mi función setSize() lea mi función showSize? () ¿valor?
Explicación: mi función showSize() muestra el valor de un elemento de entrada de rango, y necesito aplicar este valor a mi función populateBoard(), por lo que he creado la función setSize() para hacer eso, ¿tengo razón al crear esta función intermediaria para ¿Haz eso?
Estos son mis códigos:
function populateBoard(size){ let board = document.querySelector(".board"); board.style.gridTemplateColumns = `repeat(${size}, 1fr)`; board.style.gridTemplateRows = `repeat(${size}, 1fr)`; for (let i = 0; i < 256; i++) { let square = document.createElement("div"); square.style.backgroundColor = "green"; board.insertAdjacentElement("beforeend", square); } } populateBoard(16); function showSize(value) { let boardSize = document.querySelector(".show-size").innerHTML = value; } function setSize(boardSize) { let setSize = document.querySelector(".set"); setSize.addEventListener("click", () => { populateBoard(boardSize); }); } <!DOCTYPE html> <html> <head> <title> Etch-a-Sketch </title> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> </head> <body> <div class="container"> <div class="board"> </div> <div class="settings"> <button class="clear">Clear</button> <input type="range" min="8" value="16" max="128" step="8" oninput="showSize(this.value)"> <span class="show-size">16</span> <button class="set">Set</button> </div> </div> </body> </html>El problema es que está definiendo la variable boardSize en la función showSize para que la variable solo esté disponible en el ámbito de esa función. Lea lo siguiente: https://www.w3schools.com/js/js_scope.asp
Te sugiero que hagas lo siguiente.
document.querySelector(".set").addEventListener("click", () => { let boardSize = document.querySelector(".show-size").innerHTML; populateBoard(boardSize); }); function setSize(value) { document.querySelector(".show-size").innerHTML = value; }Algunos errores que tiene son configurar el detector de eventos en una función. Solo tendría una función para establecer el tamaño del tablero como se ve arriba y luego el detector de eventos para llenar el tablero al hacer clic en el botón Establecer tamaño.