增量和减量在 Javascript 中没有按预期工作

Question

我得到的意外行为是单击捐赠或撤消按钮时。 尽管颜色会立即发生变化，但跟踪器最初需要点击 2 次才能显示递增或递减的数字。 一旦它在第二次点击时改变了数字，第三次点击和使用相同的按钮将正常工作以增加或减少。
除此之外，如果您将正在单击的按钮切换到另一个按钮，它仍然会先执行上一个操作。
希望这个问题的解释是有道理的。 感谢任何可以给出的方向，因为我还是新手！

HTML：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href='style.css' />
    <title>Front-End Portfolio Project</title>
</head>
<body>
    <h1>Donate Food 2 Me</h1>
    <p id="container"></p>
    <p id='caption'>food quantity</p>
    <button id="donate">Donate</button>
    <button id="undonate">Un-Donate</button>
    <script type="text/javascript" src='main.js'></script>
</body>
</html>

记者：

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++;
}

undonate = function(){
    unDonateButton.style.backgroundColor = 'blue';
    tracker.innerHTML = i--;
}

donateButton.addEventListener("click", donate);

unDonateButton.addEventListener("click", undonate);

Answer 1

您犯的唯一错误是忽略了 i++ 和 ++i（i-- 和 --i）之间的区别。

如下更改代码（您可以在此处查看结果）：

 donate = function(){ donateButton.style.backgroundColor = 'red'; tracker.innerHTML = ++i; } undonate = function(){ if (i > 0) { unDonateButton.style.backgroundColor = 'blue'; tracker.innerHTML = --i; } }