JavaScript按钮无法多次生效：Etch-a-Sketch功能修复求助

核心问题点 #

1. Black按钮未更新颜色模式变量：blackInk函数里没有将colourMode重置为toBlack，导致点击Rainbow按钮后再点Black，颜色模式依然是随机色模式。
2. 变量拼写错误：colour函数里调用了colorMode()，但定义的变量是colourMode（英式拼写），这会直接导致颜色切换逻辑失效。
3. 重复绑定事件监听：每次点击按钮都给单元格添加mouseover事件，多次点击后同一元素会绑定多个相同事件，可能引发异常行为。
4. DOM选择器语法错误：getElementsByClassName的参数多了点号，正确写法是document.getElementsByClassName('newCell')而非.newCell。
5. 函数调用笔误：rainbowInk里给newCell绑定事件时用了未定义的v，应该是colour。

修复方案 #

最优做法是只初始化一次事件监听，按钮仅负责切换colourMode变量，避免重复绑定事件的冗余操作：

let colourMode = toBlack;
const blackBtn = document.querySelector('#black');
const rainbowBtn = document.querySelector('#rainbow');

// 一次性获取所有单元格并绑定事件，避免重复绑定
const allCells = [
  ...document.querySelectorAll('.cell'),
  ...document.querySelectorAll('.newCell')
];
allCells.forEach(cell => cell.addEventListener('mouseover', colour));

blackBtn.addEventListener('click', blackInk);
rainbowBtn.addEventListener('click', rainbowInk);

function toBlack() {
    return 'black';
}

function toRainbow() {
    const red = Math.floor(Math.random() * 256);
    const green = Math.floor(Math.random() * 256);
    const blue = Math.floor(Math.random() * 256);
    return `rgb(${red}, ${green}, ${blue})`; // 用模板字符串简化语法
}

function colour(e){
  e.target.style.backgroundColor = colourMode(); // 修正变量拼写错误
}

function blackInk() {
    colourMode = toBlack; // 更新为黑色模式
 }

function rainbowInk() {
    colourMode = toRainbow; // 更新为彩虹模式
}

额外优化说明 #

• 用扩展运算符合并两类单元格数组，替代多次Array.from的冗余写法，代码更简洁。
• 重构toRainbow的返回值为模板字符串，提升代码可读性和维护性。

内容的提问来源于stack exchange，提问作者Pacôme MARTIN