为什么我将网格元素更改为输入范围类型的大小的函数不起作用？

Question

我正在尝试创建一个 Etch-a-Sketch 项目，我进展顺利（我认为）直到开始创建一个将另一个大小应用于我的网格元素的函数，我该如何执行我的函数 setSize( ) 读取我的函数 showSize() 值？

说明：我的函数 showSize() 显示范围输入元素的值，我需要将此值应用于我的函数 populateBoard()，因此我创建了 setSize() 函数来执行此操作，我创建此中间函数来执行此操作是否正确？

这些是我的代码：

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>

Answer 1

问题是您在 showSize 函数中定义了 boardSize 变量，因此该变量仅在该函数的范围内可用。请阅读以下内容： https://www.w3schools.com/js/js_scope.asp

我建议您执行以下操作。

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

function setSize(value) {
    document.querySelector(".show-size").innerHTML = value;
}

您遇到的一些错误是在函数中设置事件侦听器。我只需要一个函数来设置板的大小，如上所示，然后事件侦听器来填充设置大小按钮的板 onclick。

为什么我将网格元素更改为输入范围类型的大小的函数不起作用？

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

javascript

html

function

grid

range