Etch-a-Sketch项目populateBoard函数异常：仅生成行未生成列

问题原因 #

• CSS语法错误导致列设置失效：在populateBoard函数中，gridTemplateColumns的取值多了一个多余的分号：

  board.style.gridTemplateColumns = `repeat(${size}, 1fr;)`; // 错误：1fr后面的分号多余
  

  浏览器无法解析这个错误的CSS值，导致网格列布局不生效，元素只会按行排列。

• 方块数量固定，未匹配输入尺寸：循环里硬编码生成256个方块，不管传入的size是多少，比如当size=10时应该生成100个方块（10×10），固定数量会导致网格布局错乱，无法形成规整的行列。

• 尺寸设置交互不完整：输入框的onchange事件能触发尺寸修改，但旁边的「Set size」按钮未绑定事件，用户点击按钮无法生效；同时没有对输入值做合法性校验（比如非数字、负数、过大数值）。

修复后的完整代码 #

HTML代码

<!DOCTYPE html>
<head>
    <title>Sketchpad</title>
    <link rel="stylesheet" href="reset.css"> 
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="title"><h1>Sketchpad</h1></div>
        <div class="content">
            <div class="board"></div>
            <div class="buttons">
                <button id="blackBtn">Black</button>
                <button id="whiteBtn">White</button>
                <button id="randomBtn">Random</button>
                <button id="resetBtn">Reset</button>
            </div>
            <input type="number" placeholder="Size of Board" value="16" min="1" max="100" id="sizeInput"/>
            <button id="setSizeBtn">Set size</button>
        </div>
    </div>
<script src="Main.js"></script>
</body>
</html>

（修正了class拼写错误flex-conainer→flex-container，给按钮和输入框添加id方便绑定事件，输入框改为type="number"并限制范围）

JavaScript代码

let currentColor = 'black';

function populateBoard(size) {
    const board = document.querySelector('.board');
    // 清空现有网格，避免叠加
    board.innerHTML = '';
    
    // 修复CSS语法错误：去掉1fr后面的分号
    board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
    board.style.gridTemplateRows = `repeat(${size}, 1fr)`;

    // 根据尺寸生成对应数量的方块
    const squareCount = size * size;
    for (let i = 0; i < squareCount; i++) {
        const square = document.createElement('div');
        square.classList.add('square');
        square.style.backgroundColor = 'white';
        // 添加鼠标hover变色交互
        square.addEventListener('mouseover', colorSquare);
        board.appendChild(square);
    }
}

function colorSquare() {
    switch(currentColor) {
        case 'black':
            this.style.backgroundColor = 'black';
            break;
        case 'white':
            this.style.backgroundColor = 'white';
            break;
        case 'random':
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            this.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
            break;
    }
}

function changeSize(input) {
    // 校验输入值合法性
    const size = parseInt(input);
    if (isNaN(size) || size < 1 || size > 100) {
        alert('请输入1-100之间的有效数字');
        document.getElementById('sizeInput').value = '16';
        return;
    }
    populateBoard(size);
}

// 绑定所有按钮事件
document.getElementById('setSizeBtn').addEventListener('click', () => {
    const input = document.getElementById('sizeInput').value;
    changeSize(input);
});

document.getElementById('blackBtn').addEventListener('click', () => currentColor = 'black');
document.getElementById('whiteBtn').addEventListener('click', () => currentColor = 'white');
document.getElementById('randomBtn').addEventListener('click', () => currentColor = 'random');
document.getElementById('resetBtn').addEventListener('click', () => {
    const size = document.getElementById('sizeInput').value;
    populateBoard(size);
});

// 页面加载初始化16×16网格
window.onload = () => populateBoard(16);

（修复列布局语法错误，动态计算方块数量，添加颜色切换、重置功能，完善输入校验）

CSS代码（优化布局与样式）

.board {
    width: 500px;
    height: 500px;
    display: grid;
    gap: 1px;
    background-color: #ccc;
}

.square {
    background-color: white;
    transition: background-color 0.1s;
}

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.buttons {
    display: flex;
    gap: 10px;
}

button {
    padding: 8px 16px;
    cursor: pointer;
}

input[type="number"] {
    padding: 8px;
    width: 100px;
    text-align: center;
}

（添加网格缝隙、方块过渡动画，优化页面整体布局）

内容的提问来源于stack exchange，提问作者Victor Mihail Galeriu