Odin项目Etch-a-Sketch：JS非display:grid网格创建问题求助

核心错误点 #

• querySelectorAll使用错误：querySelectorAll返回的是包含所有匹配元素的NodeList集合，直接对集合调用appendChild无效，必须遍历每个gridrow元素再添加子项。
• DOM查询逻辑冗余：你把document.querySelectorAll(".gridrow")放在循环内部，每次循环都重复查询DOM，既低效又容易引发逻辑混乱。
• 循环嵌套逻辑颠倒：当前代码只会给每个gridrow添加1个子元素，而非需求中的n个——外层循环次数为n，但每次循环只创建一个子元素并试图给所有行添加，完全搞反了“每行加n个”的逻辑。

修复后的代码 #

const container = document.querySelector(".container");
const input = document.querySelector("input");
const submitBtn = document.querySelector("button");

function createGrid() {
    // 清空容器，避免多次点击堆积旧元素
    container.innerHTML = "";
    let value = input.value;
    for (let i = 0; i < value; i++) {
        const createDivRow = document.createElement("div");
        createDivRow.classList.add("gridrow");
        container.appendChild(createDivRow);
    }
}

function createGridItems() {
    let value = input.value;
    // 一次性获取所有行，放在循环外部
    const divRows = document.querySelectorAll(".gridrow");
    // 遍历每一行
    divRows.forEach(row => {
        // 给当前行创建n个子元素
        for (let i = 0; i < value; i++) {
            const createDivItem = document.createElement("div");
            createDivItem.textContent = "aa";
            row.appendChild(createDivItem);
        }
    });
}

// 合并事件回调，确保创建行后再创建子元素
submitBtn.addEventListener("click", () => {
    createGrid();
    createGridItems();
});

额外优化说明 #

• 新增container.innerHTML = ""，解决多次点击按钮时容器内旧网格行堆积的问题。
• 将两个事件监听合并为一个回调函数，明确createGrid执行完成后再执行createGridItems，逻辑更清晰。
• 调整循环嵌套顺序：先遍历所有行，再给每行创建n个子元素，完全匹配“每个gridrow添加n个子div”的需求。

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