按钮.disabled属性失效求助：无法按条件禁用/启用按钮

你的代码存在两个核心问题，导致按钮禁用逻辑失效：

1. 未初始化按钮的禁用状态 #

页面加载完成时，atom_amount初始值为0，远小于matter_cost的初始值10，此时matter_btn应该处于禁用状态，但你的代码只在点击atoms_btn时才更新按钮状态，完全没处理初始状态。

2. 消耗原子后未更新按钮状态 #

当点击matter_btn消耗原子后，atom_amount减少，同时matter_cost会增加，但此时没有重新检查原子数量是否足够，按钮会保持启用状态，不符合逻辑。

修复后的代码 #

把按钮状态检查抽成独立函数，在初始化、点击atoms_btn、点击matter_btn后都调用这个函数，确保状态同步：

document.addEventListener('DOMContentLoaded', function() {
    var atom_amount = 0;
    var matter_btn = document.getElementById('matter_btn');
    var matter_amount = 0;
    var matter_cost = 10;

    // 封装状态检查函数，避免重复代码
    function updateMatterBtnState() {
        matter_btn.disabled = atom_amount < matter_cost;
    }

    // 初始化时设置按钮状态
    updateMatterBtnState();

    document.getElementById('atoms_btn').onclick = function() {
        atom_amount++;
        document.getElementById('atoms_txt').textContent = "Atoms: " + atom_amount;
        updateMatterBtnState();
    };

    document.getElementById('matter_btn').onclick = function() {
        atom_amount -= matter_cost;
        document.getElementById('atoms_txt').textContent = "Atoms: " + atom_amount;
        matter_amount++;
        matter_cost += 2 * matter_amount;
        document.getElementById('matter_txt').textContent = "Matter: " + matter_amount;
        // 消耗原子后重新检查按钮状态
        updateMatterBtnState();
    };
});

额外优化点 #

• 用textContent替代innerHTML：仅更新文本内容时，textContent更安全且性能更好，避免XSS风险。
• 简化条件判断：matter_btn.disabled = atom_amount < matter_cost直接替代if-else，逻辑更简洁。

如果后续发现禁用按钮的样式不明显，可以给禁用状态的按钮添加CSS样式：

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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