JS随机数生成器结合parseInt实现分数统计异常问题排查

你的分数统计功能出问题，核心是错误地覆盖了DOM元素引用变量，加上初始值处理的小问题，我们一步步来修正：

你代码里的关键错误 #

1. const变量被非法重新赋值：
   你先通过const scoreKeeper = document.getElementById('score');获取了<h2 id="score">的DOM元素，紧接着又写了scoreKeeper = 0;——const声明的变量不能被重新赋值，而且这会把原本指向DOM元素的变量改成了数字0，后续你再调用scoreKeeper.innerText时，数字是没有innerText属性的，自然会返回undefined，parseInt(undefined)就得到了NaN。
2. 初始空文本的parseInt处理：
   页面刚加载时，<h2 id="score">的内容是空的，parseInt('')会返回NaN，需要兜底处理成0。
3. 冗余的条件判断：
   Math.floor(Math.random() * 100) + 1生成的是1到100之间的整数，必然大于0，所以if (generatedNumber > 0)这个判断完全没必要。

修正后的完整代码 #

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 scoreKeeper = document.getElementById('score');

function randGen() {
  const p = document.getElementById('paragraph');
  const generatedNumber = Math.floor(Math.random() * 100) + 1;
  
  // 处理初始空文本的情况，兜底为0，同时指定基数10避免parseInt的意外行为
  let currentNumber = parseInt(scoreKeeper.innerText, 10) || 0;
  
  p.innerHTML = `Your number is: ${generatedNumber}`;
  currentNumber += generatedNumber;
  scoreKeeper.innerText = currentNumber;
}

修正说明 #

• 去掉了scoreKeeper = 0;这行错误代码，让scoreKeeper始终指向DOM元素。
• 在parseInt里加上了第二个参数10（十进制基数），这是parseInt的最佳实践，避免遇到以0开头的字符串时被当成八进制解析的旧问题。
• 用|| 0兜底处理初始空文本导致的NaN，确保初始分数从0开始累加。
• 移除了冗余的if判断，简化代码逻辑。

现在点击按钮，随机数就会正常累加到分数里，不会再出现NaN或者字符串拼接的问题了。

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