JS变色按钮实现三次点击后隐藏？原有失效判断求低改动修复

你写的判断逻辑有三处不符合JS执行规则，导致功能跑不通：

• 判断表达式写反了优先级：color[change > 2] 不是判断「change是否大于2」，JS会先算change > 2这个布尔结果，把结果转成0/1当作数组的索引取值，最后这个表达式永远会取到color[0]也就是字符串"green"，根本起不到状态判断作用。
• 执行顺序完全反了：你是先执行了「把按钮颜色往后切一位」的代码，再去做判断——当按钮处于黄色状态时，它存储的颜色值对应数组索引是2，这时候直接取color[change+1]也就是索引3的内容，是不存在的undefined值，给按钮设了个无效的颜色，根本等不到正确判断状态。
• 元素引用错位：if块里写的button.style.display = "none"里的button变量，是创建按钮时在循环里用的临时变量，在点击事件的作用域里根本访问不到，运行到这一行会直接报引用错误，根本执行不了隐藏逻辑。

完全不需要改动你现有按钮创建、颜色数组定义的逻辑，只需要修改点击事件的处理函数，把判断逻辑移到切色操作之前就行，核心调整点：

• 用已经获取到的当前按钮元素Amount做隐藏操作，不需要找其他不存在的变量
• 先判断按钮当前存储的颜色是不是数组索引为2的黄色状态，是就直接隐藏，跳出函数，不执行后续切色逻辑
• 把原来写错的判断块删掉，替换成正确的判断逻辑

调整后的完整点击处理函数代码：

function onbuttonclicked(a) {
    var Amount = document.getElementById("button" + a);
    var click = Amount.getAttribute('Color');
    var change = color.indexOf(click);

    // 新增的判断：当前处于黄色状态时直接隐藏
    if (change === 2) {
        Amount.style.display = "none";
        return; // 直接结束函数，不执行后续切色代码
    }

    // 以下为你原有逻辑，完全保留不改动
    Amount.setAttribute('style', 'background-color:' + color[change + 1]);
    Amount.setAttribute('Color', color[change + 1]);
}

改动量说明：你原来写的那个错误if块直接删掉，只加了3行代码，所有原有按钮生成、颜色切换的逻辑完全没动，不会影响原来的绿→红→黄的切换流程。

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