如何点击切换动态生成按钮的文字颜色（JavaScript+HTML）

错误原因 #

1. 事件绑定方式错误：通过JS创建DOM元素时，不能将onclick属性赋值为字符串（这种写法仅适用于HTML标签的onclick属性），需要直接绑定函数引用。
2. 颜色判断存在兼容性问题：element.style.color仅读取内联样式，且部分浏览器会将颜色转换为RGB格式（如rgb(0, 0, 0)），导致pp.style.color == "black"的判断失效。

修正后的代码 #

function LoopTest() {
    for (let i = 65; i < 91; i++) {  
        const v = document.createElement('input');
        v.type = "button";
        v.value = String.fromCharCode(i);
        v.style.color = "black";
        // 直接绑定点击事件，传入当前按钮元素
        v.onclick = function() {
            changeColor(this);
        };
        document.getElementById('test').appendChild(v);
    }
}

function changeColor(btn) {
    // 获取元素实际生效的颜色，兼容不同浏览器的格式
    const currentColor = window.getComputedStyle(btn).color;
    // 判断当前颜色是否为黑色（支持关键字和RGB两种格式）
    if (currentColor === "black" || currentColor === "rgb(0, 0, 0)") {
        btn.style.color = "white";
    } else {
        btn.style.color = "black";
    }
}

优化说明 #

• 移除了冗余变量stop，简化循环逻辑。
• 用let/const替代var，避免变量提升带来的潜在问题。
• 直接传入按钮元素到切换函数，无需通过id二次查找，提升执行效率。
• 使用getComputedStyle获取实际生效颜色，解决浏览器颜色格式不一致的问题。

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