JavaScript中自增自减功能不符合预期的问题求助

问题原因 #

你代码里用了i++和i--这种后置自增/自减运算符，它们的执行顺序是：

• 先把当前i的数值赋值给tracker.innerHTML（也就是页面上显示的数字）
• 再对i进行加1或减1操作

所以第一次点击按钮时，页面显示的还是原来的数字，i的变化要等下一次点击才会显示出来，就出现了「点两次才更新」的问题。

修复方案 #

有两种简单的修改方式，任选其一即可：

方式一：改用前置自增/自减运算符 #

把i++改成++i，i--改成--i，这样执行顺序变成「先更新i的数值，再赋值给页面」，点击按钮就能立即看到数字变化：

const donateButton = document.getElementById("donate");
const unDonateButton = document.getElementById("undonate");
const tracker = document.getElementById("container");
var i = 0;

tracker.innerHTML = i;

donate = function(){
    donateButton.style.backgroundColor = 'red';
    tracker.innerHTML = ++i; // 前置自增：先加1再赋值
}

undonate = function(){
    unDonateButton.style.backgroundColor = 'blue';
    tracker.innerHTML = --i; // 前置自减：先减1再赋值
}

donateButton.addEventListener("click", donate);
unDonateButton.addEventListener("click", undonate);

方式二：先更新数值再赋值 #

这种方式逻辑更直观，适合新手理解，先手动给i加1/减1，再把更新后的i赋值给页面：

const donateButton = document.getElementById("donate");
const unDonateButton = document.getElementById("undonate");
const tracker = document.getElementById("container");
var i = 0;

tracker.innerHTML = i;

donate = function(){
    donateButton.style.backgroundColor = 'red';
    i += 1; // 先让i加1
    tracker.innerHTML = i; // 再把新的i值显示到页面
}

undonate = function(){
    unDonateButton.style.backgroundColor = 'blue';
    i -= 1; // 先让i减1
    tracker.innerHTML = i; // 再把新的i值显示到页面
}

donateButton.addEventListener("click", donate);
unDonateButton.addEventListener("click", undonate);

额外优化（可选） #

点击一个按钮时，可以把另一个按钮的颜色恢复默认，避免两个按钮同时变色：

donate = function(){
    donateButton.style.backgroundColor = 'red';
    unDonateButton.style.backgroundColor = ''; // 恢复Un-Donate按钮的默认颜色
    tracker.innerHTML = ++i;
}

undonate = function(){
    unDonateButton.style.backgroundColor = 'blue';
    donateButton.style.backgroundColor = ''; // 恢复Donate按钮的默认颜色
    tracker.innerHTML = --i;
}

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