跨页面JavaScript分数计数器功能异常问题求助

核心问题修复：字符串转数字 #

localStorage存储的所有数据都是字符串类型，直接用+运算会触发字符串拼接。必须把读取到的分数转为数字后再做累加，推荐用parseInt(值, 10)或Number(值)处理。

完整实现步骤 #

1. 页面初始化逻辑 #

页面加载时读取本地存储的分数，转成数字后更新计数器，同时重置所有按钮的可点击状态：

document.addEventListener('DOMContentLoaded', () => {
  // 读取分数，转数字，无存储数据则默认0
  const currentScore = parseInt(localStorage.getItem('score'), 10) || 0;
  document.getElementById('score-counter').textContent = currentScore;

  // 刷新后重置按钮状态：启用所有按钮并添加可点击标记
  document.querySelectorAll('.increment-button').forEach(btn => {
    btn.disabled = false;
    btn.classList.add('first-click');
  });
});

2. 修复分数累加与按钮点击逻辑 #

给所有带increment-button类的按钮绑定点击事件，实现分数正确累加、本地存储更新和按钮单次点击限制：

document.addEventListener('DOMContentLoaded', () => {
  // 先执行上面的初始化代码

  document.querySelectorAll('.increment-button').forEach(btn => {
    btn.addEventListener('click', () => {
      // 读取当前分数并转数字
      let currentScore = parseInt(localStorage.getItem('score'), 10) || 0;
      // 累加指定分数（这里是加10）
      currentScore += 10;
      // 更新本地存储
      localStorage.setItem('score', currentScore);
      // 更新页面计数器显示
      document.getElementById('score-counter').textContent = currentScore;
      // 禁用当前按钮，移除可点击标记
      btn.disabled = true;
      btn.classList.remove('first-click');
    });
  });
});

3. 便捷添加新按钮 #

新增按钮时，只需给按钮加上increment-button first-click类，无需修改JS代码：

<!-- 现有按钮 -->
<button class="increment-button first-click">完成任务 +10</button>
<!-- 新增按钮直接套用类即可 -->
<button class="increment-button first-click">解锁知识点 +10</button>

4. 跨页面同步说明 #

因为使用localStorage存储分数，所有同源页面会自动共享数据，只要每个页面的导航栏包含id="score-counter"的元素，并引入上述JS代码，就能实现跨页面分数同步。

常见问题排查 #

• 仍出现字符串拼接：检查是否漏写parseInt/Number转换，确保每次读取分数时都转为数字类型。
• 刷新后按钮无法点击：确认初始化逻辑中是否将按钮的disabled属性设为false，上述代码已包含该处理。

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