我的updateCounters()函数失效：石头剪刀布屏保计数器不更新

问题根源 #

你的计数器通过元素的class（.scissors/.rock/.paper）统计数量，但表情碰撞发生类型转换时，只修改了元素文本内容，未同步更新对应class，导致统计的始终是初始加载时的class数量，无法实时反映当前表情类型。

另外代码存在笔误：启动初始定时器时用了未声明的internal变量，而你声明的定时器变量是interval，这会导致点击pause/reset按钮无法停止初始动画循环。

修复方案 #

1. 同步更新元素class：在updateState函数中，修改文本内容的同时，更新元素class列表，移除旧类型class，添加新类型class。
2. 修正定时器变量名：把最后一行的internal改为interval，保证pause/reset能正确控制初始动画。

修改后的关键代码 #

修正updateState函数

function updateState(emoji1, emoji2) {
  if (emoji1.textContent === '✂️' && emoji2.textContent === '📄') {
    emoji2.textContent = '✂️';
    emoji2.classList.remove('paper');
    emoji2.classList.add('scissors');
  } else if (emoji1.textContent === '📄' && emoji2.textContent === '✂️') {
    emoji1.textContent = '✂️';
    emoji1.classList.remove('paper');
    emoji1.classList.add('scissors');
  } else if (emoji1.textContent === '🪨' && emoji2.textContent === '✂️') {
    emoji2.textContent = '🪨';
    emoji2.classList.remove('scissors');
    emoji2.classList.add('rock');
  } else if (emoji1.textContent === '✂️' && emoji2.textContent === '🪨') {
    emoji1.textContent = '🪨';
    emoji1.classList.remove('scissors');
    emoji1.classList.add('rock');
  } else if (emoji1.textContent === '📄' && emoji2.textContent === '🪨') {
    emoji2.textContent = '📄';
    emoji2.classList.remove('rock');
    emoji2.classList.add('paper');
  } else if (emoji1.textContent === '🪨' && emoji2.textContent === '📄') {
    emoji1.textContent = '📄';
    emoji1.classList.remove('rock');
    emoji1.classList.add('paper');
  }
}

修正定时器变量名

把最后一行的：

internal = setInterval(() => {

改为：

interval = setInterval(() => {

效果验证 #

修改后，表情碰撞类型转换时元素class会同步更新，updateCounters函数查询class数量就能得到实时统计，计数器将正确显示当前各表情的数量。

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