Odin项目Etch-a-Sketch：点击按钮重绘画布时获取按钮文本

核心问题是点击尺寸按钮时，没有将选中的尺寸传递给drawBoard函数。你可以通过以下方式解决，完全不用传参、bind或者冗余遍历：

修改方案 #

1. 声明全局的boardSize变量，初始化为默认的"16x16"；
2. 在按钮点击事件中，先把当前按钮的innerText赋值给boardSize，再调用redrawBoard；
3. 保持drawBoard和redrawBoard的逻辑不变，drawBoard会直接读取最新的boardSize值。

修改后的完整代码 #

JavaScript #

// 全局变量存储当前选中的尺寸
let boardSize = "16x16";

function drawBoard() {
    let pixelDivider = 1;
    if (boardSize == "32x32") {
        pixelDivider = 2;
        boardSize = 32;
    } else if (boardSize == "64x64") {
        pixelDivider = 4;
        boardSize = 64;
    } else {
        pixelDivider = 1;
        boardSize = 16;
    }
    for (let j=0; j<boardSize; j++) {
        for (let i=0; i<boardSize; i++) {    
            const div = document.createElement('div');
            let pixelSize = 40 / pixelDivider;
            div.style.width = `${pixelSize}px`;
            div.style.height = `${pixelSize}px`;   
            div.classList.add('pixel')
            drawContainer.appendChild(div);
        }
    }
}

function redrawBoard () {
    let canvasSize = drawContainer.childElementCount;
    for (let i=0; i<canvasSize; i++) {
        drawContainer.removeChild(drawContainer.lastElementChild)
    }
    drawBoard();
}

const drawContainer = document.querySelector('.sketch');
drawBoard();
const canvasSizeButton = document.querySelectorAll('.canvas-size-button');

// 点击时先更新尺寸变量，再触发重绘
canvasSizeButton.forEach(button => button.addEventListener('click', () => {
    boardSize = button.innerText;
    redrawBoard();
}))

HTML（无需修改） #

<div class="canvas-size">
  <button class="canvas-size-button">16x16</button>
  <button class="canvas-size-button">32x32</button>
  <button class="canvas-size-button">64x64</button>
</div>

说明 #

• 全局变量boardSize作为中间载体，在点击时更新为选中的尺寸字符串，drawBoard会自动读取最新值计算画布参数；
• 完全符合你“不给redrawBoard传参、不用bind”的要求，逻辑简洁无冗余；
• 初始值设为"16x16"，保证页面加载时默认绘制正确的初始画布。

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