Why my function to change a grid element to the size of an input of type range doesn't work?


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?

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);

function showSize(value) {
    let boardSize = document.querySelector(".show-size").innerHTML = value;

function setSize(boardSize) {
    let setSize = document.querySelector(".set");
    setSize.addEventListener("click", () => {
<!DOCTYPE html>

    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css"> 
    <script src="script.js" defer></script>

    <div class="container">
        <div class="board">   

        <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>



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:

I suggest you do the following.

document.querySelector(".set").addEventListener("click", () => {
    let boardSize = document.querySelector(".show-size").innerHTML;

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.

Answered By – Obsidianlab

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.