Etch A Sketch游戏表单内input输入框失效问题求助

问题分析 #

输入框失效的核心原因是form中的元素默认类型为submit：

• 点击「Random Grid」或「Clear」按钮时，会自动触发form的submit事件，同时执行按钮自身绑定的click事件。
• 「Random Grid」的click事件里主动设置了input.disabled = true，再叠加form的submit事件执行的禁用逻辑，导致输入框被意外锁定，无法正常交互。

解决方案 #

只需两步即可修复，同时保留form结构：

1. 给两个按钮添加type="button"属性，阻止它们默认触发form的submit事件，确保只执行各自绑定的逻辑。
2. 优化网格生成逻辑，避免重复创建单元格，同时增加输入校验提升稳定性。

修改后的代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="JS.js" defer></script>
    <title>Etch A Sketch</title>
</head>

<body>
    <div class="header">
        <h1>Etch A Sketch</h1>
        <form id="inputForm">
           <button type="button" id="clear">Clear</button>
           <button type="button" id="generator">Random Grid</button>
           <input type="number" id="number" min=1 max=64 placeholder="Enter a # 1-64">
        </form>
    </div>
    <div id="gridContainer">
    </div>
</body>
</html>

JavaScript部分 #

var form = document.getElementById("inputForm");
var clearButton = document.getElementById("clear");
var input = document.getElementById("number");
var gridContainer = document.getElementById("gridContainer"); // 提前获取元素，减少重复DOM查询

// 输入框提交生成网格逻辑
form.addEventListener("submit", function(e) {
    e.preventDefault();
    const boxInput = input.value;
    if (!boxInput || boxInput < 1 || boxInput > 64) return; // 过滤无效输入

    // 清空现有网格
    while (gridContainer.firstChild) {
        gridContainer.removeChild(gridContainer.firstChild);
    }

    // 设置网格布局并生成单元格
    gridContainer.style.gridTemplateColumns = `repeat(${boxInput}, 1fr)`;
    gridContainer.style.gridTemplateRows = `repeat(${boxInput}, 1fr)`;
    for (var i = 0; i < boxInput * boxInput; i++) {
        var div = document.createElement("div");
        div.className = "grid";
        gridContainer.appendChild(div);
    }
    input.disabled = true; // 生成后禁用输入框
});

// 随机网格生成逻辑
var randomGrid = document.getElementById('generator')
randomGrid.addEventListener('click', function(){
    const randomNumber = Math.floor(Math.random() * 64) + 1; 

    // 清空现有网格
    while (gridContainer.firstChild) {
        gridContainer.removeChild(gridContainer.firstChild);
    }

    // 设置网格布局并生成单元格
    gridContainer.style.gridTemplateColumns = `repeat(${randomNumber}, 1fr)`;
    gridContainer.style.gridTemplateRows = `repeat(${randomNumber}, 1fr)`;
    for (var i = 0; i < randomNumber * randomNumber; i++) {
        var div = document.createElement("div");
        div.className = "grid";
        gridContainer.appendChild(div);
    }
    input.disabled = true; // 生成后禁用输入框
});

// 鼠标hover变色逻辑
gridContainer.addEventListener('mouseover', function(element) {
    if (element.target.classList.contains('grid')) {
        element.target.style.backgroundColor = 'black';
    }
});

// 清空网格逻辑
clearButton.addEventListener("click", function() {
    input.disabled = false;
    input.value = '';
    while (gridContainer.firstChild) {
        gridContainer.removeChild(gridContainer.firstChild);
    }
});

额外优化说明 #

• 提前获取gridContainer元素，避免重复DOM查询提升性能。
• 生成新网格前先清空现有内容，防止单元格叠加。
• 增加输入数值校验，避免无效值导致的逻辑错误。
• 移除Clear按钮中的e.preventDefault()，因为按钮已设置为type="button"，不会触发submit事件。

内容的提问来源于stack exchange，提问作者Pete1230z