JS随机数计分器：用parseInt返回NaN，移除则字符串拼接，求排查

嘿，我来帮你搞定这个计分器的问题！你的代码核心问题是混淆了DOM元素引用和计分数值的变量，导致后续的数值计算和DOM更新全乱了。咱们一步步拆解：

主要问题点 #

• 错误覆盖DOM元素变量：你先用const scoreKeeper = document.getElementById('score');获取了页面上的<h2>元素引用，但紧接着又写了scoreKeeper = 0;——这里不仅违反了const变量不可重新赋值的规则，更关键的是你把原本指向DOM元素的变量改成了数字0，后面再调用scoreKeeper.innerText自然会报错，让parseInt拿到undefined从而返回NaN。
• 初始状态逻辑混乱：页面加载时score元素的文本是空的，就算变量没被覆盖，parseInt(scoreKeeper.innerText)也会得到NaN，虽然你加了?? 0兜底，但因为前面的变量覆盖问题，这一步根本没作用在正确的DOM元素上。

修正后的代码 #

HTML部分（无需改动，保持原样即可） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<div>
<h1>Score Keeper</h1>
<button onclick="randGen()">Random Numbers</button>
<p id="paragraph"></p>
</div>
<h2 id="score"></h2>
<script src="pets.js"></script>
</body>
</html>

JavaScript部分 #

// 保留DOM元素引用，不要覆盖它
const scoreElement = document.getElementById('score');
// 单独用变量存储计分数值，初始化设为0
let currentScore = 0;
// 页面加载时先把初始分数同步到DOM
scoreElement.innerText = currentScore;

function randGen() {
  const p = document.getElementById('paragraph');
  const generatedNumber = Math.floor(Math.random() * 100) + 1;
  
  // 直接操作currentScore变量，不用再从DOM读取
  currentScore += generatedNumber;
  // 更新DOM显示
  scoreElement.innerText = currentScore;
  p.innerHTML = `Your number is: ${generatedNumber}`;
}

修正逻辑说明 #

1. 把DOM元素引用和计分数值分开存储：scoreElement专门负责操作DOM，currentScore专门存储分数数据，再也不会混淆。
2. 初始化时直接把currentScore的0值同步到DOM，避免初始空文本的问题。
3. 每次生成随机数后，直接对currentScore做数值累加，再同步到DOM，彻底解决字符串拼接或者NaN的问题。

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