点击按钮切换元素内容与颜色失效问题（JavaScript）

核心问题 #

你代码里的isOn是函数内部的局部变量，每次点击触发函数时都会被重新赋值为true，导致逻辑永远只会执行if分支，无法切换到OFF状态。

解决方案 #

方案1：将状态变量移到函数外部（全局变量）

把isOn定义在函数外面，这样每次点击时能保留上一次的状态：

var isOn = true;
function onBall3Click() {
    var ball3 = document.querySelector('.ball3')
    
    if (isOn) {
       ball3.style.backgroundColor = 'Yellow'
       ball3.innerText = 'ON'
    } else {
       ball3.style.backgroundColor = 'Grey'
       ball3.innerText = 'OFF'   
    }
    
    isOn = !isOn
    
    ball3.style.width = ball3Size + 'px';
    ball3.style.height = ball3Size + 'px';
}

方案2：用元素自定义属性存储状态（避免全局变量污染）

把状态存在元素自身的data-*属性里，不需要全局变量，更优雅：

function onBall3Click() {
    var ball3 = document.querySelector('.ball3')
    // 读取元素的自定义状态，默认初始为ON
    var isOn = ball3.dataset.isOn !== 'false';
    
    if (isOn) {
       ball3.style.backgroundColor = 'Yellow'
       ball3.innerText = 'ON'
       ball3.dataset.isOn = 'true';
    } else {
       ball3.style.backgroundColor = 'Grey'
       ball3.innerText = 'OFF'   
       ball3.dataset.isOn = 'false';
    }
    
    ball3.style.width = ball3Size + 'px';
    ball3.style.height = ball3Size + 'px';
}

第一次执行时会自动为元素创建data-is-on属性，无需提前手动添加。

方案3：闭包封装状态（适合逻辑需要隔离的场景）

通过闭包把状态变量封装起来，既不会污染全局作用域，又能保留状态：

var onBall3Click = (function() {
    var isOn = true;
    return function() {
        var ball3 = document.querySelector('.ball3')
        
        if (isOn) {
           ball3.style.backgroundColor = 'Yellow'
           ball3.innerText = 'ON'
        } else {
           ball3.style.backgroundColor = 'Grey'
           ball3.innerText = 'OFF'   
        }
        
        isOn = !isOn
        
        ball3.style.width = ball3Size + 'px';
        ball3.style.height = ball3Size + 'px';
    }
})();

额外提示 #

注意确认ball3Size变量已经被正确定义，否则元素的宽高设置会失效。

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