双点击计数器合计值不更新问题求助

你的代码里，计算总点击数的语句只在页面加载时执行了一次，后续点击图片时不会重新计算，所以总点击数一直显示0。解决方法是把总点击数的更新逻辑封装成函数，每次点击图片后调用它。

修改后的完整代码：

<div>
    <p> Pikachu Total Clicks : <span id="vPika"> 0 </span> </p>
    <img id="pika" src="https://img.pokemondb.net/sprites/ultra-sun-ultra-moon/normal/pikachu-f.png"/>
</div>

<div>
    <p> NineTails Total Clicks : <span id="vNine"> 0 </span> </p>
    <img id="nine" src="https://img.pokemondb.net/sprites/black-white/shiny/ninetales.png"/>             
</div>
<p> Overall Total Clicks : <span id="tClicks">  0 </span> </p>

<script>
var pikaClicks = 0;
var nineClicks = 0;

// 封装更新总点击数的函数
function updateTotalClicks() {
    tClicks.innerHTML = pikaClicks + nineClicks;
}

pika.onclick = function() {
    pikaClicks++;
    vPika.innerHTML = pikaClicks;
    updateTotalClicks(); // 点击后更新总点击数
}

nine.onclick = function() {
    nineClicks++;
    vNine.innerHTML = nineClicks;
    updateTotalClicks(); // 点击后更新总点击数
}
</script>

修改说明： #

• 新增updateTotalClicks函数，直接用已有的pikaClicks和nineClicks变量计算总点击数，比从DOM元素读取更高效可靠。
• 在两个图片的点击事件处理函数末尾，调用updateTotalClicks，确保每次点击后总点击数都会同步更新。

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