I'm trying to create an Etch-a-Sketch project, I was going well (I think) until start to create a function that apply another size to my grid element, how can I do my function setSize() reads my function showSize() value?
Explanation: My function showSize() shows the value of a range input element, and I need to apply this value to my function populateBoard(), so I have created setSize() function to do that, Am I right creating this intermediary function to do that?
These are my codes:
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>The problem is that you are defining the boardSize variable in the showSize function so that variable is only available in the scope of that function. Please read the following: https://www.w3schools.com/js/js_scope.asp
I suggest you do the following.
document.querySelector(".set").addEventListener("click", () => {
let boardSize = document.querySelector(".show-size").innerHTML;
populateBoard(boardSize);
});
function setSize(value) {
document.querySelector(".show-size").innerHTML = value;
}
Some errors you have is setting the event listener in a function. I would just have a function to set the board size as seen above and then the event listener to populate the board onclick of the set size button.