简化JavaScript颜色切换函数后无法正常运行问题求助

问题原因 #

你当前的实现存在两个核心问题：

• 仅封装了高亮状态的样式修改逻辑，没有对应封装恢复默认样式的逻辑。原有业务逻辑需要在用户二次选择时重置上一次选中的电脑选项样式，缺失这部分通用函数会导致流程无法跑通
• 调用通用函数时必须传入实际的DOM元素对象，若直接传入元素ID字符串不会生效。如果你的全局变量compRock/compPaper/compScissors是提前获取好的DOM对象，调用时要写colorChange(compRock)；如果没有提前定义全局DOM变量，要先获取再传入：colorChange(document.getElementById('对应元素ID'))

完整优化方案 #

方案1：拆分两个独立通用函数 #

// 高亮选中的电脑选项
function highlightElement(element) {
    element.style.backgroundColor = 'gold';
    element.style.color = '#414141';
}

// 恢复元素默认样式
function resetElementStyle(element) {
    element.style.backgroundColor = '#414141';
    element.style.color = 'white';
}

调用示例：

// 电脑随机选中石头时调用
highlightElement(compRock);

// 用户下次选择前，重置所有电脑选项样式
resetElementStyle(compRock);
resetElementStyle(compPaper);
resetElementStyle(compScissors);

方案2：合并为单个状态切换函数 #

可以用第二个参数控制样式状态，进一步精简代码：

function toggleElementStyle(element, isHighlight) {
    element.style.backgroundColor = isHighlight ? 'gold' : '#414141';
    element.style.color = isHighlight ? '#414141' : 'white';
}

调用示例：

// 高亮石头
toggleElementStyle(compRock, true)
// 恢复石头样式
toggleElementStyle(compRock, false)

额外优化建议 #

可以提前把所有电脑选项DOM存入数组，重置样式时直接遍历，减少重复代码：

// 提前定义电脑选项DOM数组
const compOptions = [compRock, compPaper, compScissors];

// 一键重置所有电脑选项样式
function resetAllCompStyles() {
    compOptions.forEach(el => toggleElementStyle(el, false));
}

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