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

发布于 2025-01-20 23:52:00 字数 1907 浏览 1 评论 0原文

我正在尝试创建一个 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

记忆里有你的影子 2025-01-27 23:52:00

问题在于，您正在定义显示函数中的董事会变量，以便仅在该函数的范围中可用。请阅读以下内容：
https://wwwww.w3schools.com/js/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;
}

您遇到的一些错误是在函数中设置事件侦听器。
我只有一个功能可以设置如上所述的板尺寸，然后将事件侦听器设置为填充设定尺寸按钮的板。

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.

回复收藏 0 原文

~没有更多了~