为何点击HTML中的cookie元素时数值增加2而非1？

问题根源 #

你的代码里重复绑定了Cookie元素的点击事件：

• HTML中的<div class="cookie">标签通过onclick="cookieClick()"属性直接绑定了点击事件
• 同时在JavaScript的DOMContentLoaded回调中，又通过addEventListener给同一个元素绑定了一次cookieClick函数

每次点击Cookie时，cookieClick()会被触发两次，而初始upgrade=1，所以num += upgrade执行两次，最终表现为单次点击数值+2。

你尝试修改num或upgrade后数值变0，是因为错误地直接将变量赋值为0，而非修复事件重复绑定的核心问题。

解决方案 #

只需要保留一种事件绑定方式即可，二选一：

方案1：移除HTML中的onclick属性 #

修改HTML中的Cookie元素，去掉onclick属性：

<div class="cookie"></div>

方案2：移除JavaScript中的addEventListener绑定 #

删除JS中DOMContentLoaded回调里的这一行：

document.querySelector(".cookie").addEventListener("click", cookieClick);

两种方案都能确保单次点击只触发一次cookieClick()，此时num会按照预期每次+1（因为初始upgrade=1）。

修正后的完整代码示例 #

这里以方案1为例，保留JS的事件绑定，修改HTML：

HTML #

<div class="counter">Cookies: <span id="cookieCount">0</span></div>
<div class="darkMode" onclick="darker()">Dark Mode Button:</div>
<div id="b1" onclick="b1()">(<span id="inflationCase">20</span> cookies for) Grandmas: <span id="grandma">0</span><span id="noCookies"></span></div>
<div id="b2" onclick="b2()">Auto Clicks: <span id="mouseclick">0</span></div>
<div class="cookie"></div>

JavaScript #

let num = 0;
let upgrade = 1;
let noCookiesCheck = 0;
let isThereNoCookies = false;
let mouseupgrade = 0;
let autoClickInterval = 1000; // Interval in milliseconds
let upgradeInflation = 1;

function checker() {
  document.getElementById("cookieCount").innerHTML = num;
  document.getElementById("grandma").innerHTML = upgrade - 1;
  if (isThereNoCookies && noCookiesCheck >= 1) {
    document.getElementById("noCookies").innerHTML = " Not enough Cookies!";
    noCookiesCheck -= 20;
  } else {
    document.getElementById("noCookies").innerHTML = ""; // Clear the message
    isThereNoCookies = false; // Reset the flag
  }
  document.getElementById("inflationCase").innerHTML = Math.floor(20 * upgradeInflation);
}

function cookieClick() {
  num += upgrade;
}

function darker() {
  var body = document.body;
  var cookies = document.getElementsByClassName("cookie");
  for (var i = 0; i < cookies.length; i++) {
    cookies[i].style.backgroundColor = "#390100";
  }
  body.style.backgroundColor = "#3b53ff";
}

function b1() {
  const cost = Math.floor(20 * upgradeInflation);
  if (num >= cost) {
    num -= cost;
    upgrade += 1;
    upgradeInflation += 0.15;
  } else {
    noCookiesCheck = 5000; // Set a longer duration
    isThereNoCookies = true;
  }
}

function b2() {
  const cost = 10; // Fixed cost for auto-click
  if (num >= cost) {
    num -= cost;
    mouseupgrade += 1;
    document.getElementById("mouseclick").innerHTML = mouseupgrade;
  } else {
    noCookiesCheck = 5000; // Set a longer duration
    isThereNoCookies = true;
  }
}

// Auto increment cookies based on mouseupgrade
function autoCookieClick() {
  if (mouseupgrade > 0) {
    num += mouseupgrade;
  }
}

// Call checker() every 100 milliseconds
setInterval(checker, 100);

// Call autoCookieClick() every second
setInterval(autoCookieClick, autoClickInterval);

// Adding event listeners
document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".darkMode").addEventListener("click", darker);
  document.getElementById("b1").addEventListener("click", b1);
  document.getElementById("b2").addEventListener("click", b2);
  document.querySelector(".cookie").addEventListener("click", cookieClick);
});

CSS #

body {
  background-color: rgb(0, 110, 255);
  font-family: "Ubuntu", sans-serif;
}

body,
.cookie {
  transition: background-color 0.5s ease;
}

.counter {
  background-color: rgb(55, 96, 185);
  font-family: "Ubuntu", sans-serif;
  border-radius: 10%;
  height: 100px;
  width: 300px;
  text-align: center;
  position: fixed;
  top: 10px;
  left: 40%;
}

.darkMode {
  background-color: gray;
  border-radius: 20%;
  height: 100px;
  width: 100px;
  text-align: center;
  position: fixed;
  top: 110px;
  left: 10px;
}

.cookie {
  background-color: brown;
  border-radius: 50%;
  height: 500px;
  /* Set a fixed height */
  width: 500px;
  /* Set the same width to make it a circle */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Center the element */
}

.buttonConcept,
#b1,
#b2,
#b3 {
  background-color: blue;
  color: aliceblue;
  height: 200px;
  border-radius: 10px;
  width: 300px;
}

#b1 {
  position: fixed;
  top: 10px;
  right: 10px;
}

#b2 {
  position: fixed;
  top: 210px;
  right: 10px;
}

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