使用alert()计算1至输入数字的和时点击按钮无响应求助

我需要实现一个功能：输入数字后点击“Calculate Sum”按钮，通过alert()弹窗展示1到该数字的累加和。但目前点击按钮后无任何弹窗，且页面上的HTML输入标签也未正常显示。附上实现代码，希望得到帮助。

原代码 #

JavaScript 代码 #

function sumOfNumbers() {
  var theNumber = document.getElementById("txtNumber").value;
  if (theNumber > 0) {
    var theSum = 0;
    for (var i = 1; i <= theNumber; i++) {
      theSum += i;
    }

    alert(
      "The sum of all the numbers from 1 to " + theNumber + " is " + theSum + ""
    );
  } else {
    alert("negative " + theNumber);
  }
}

HTML 代码 #

<input type='text' id='txtNumber'>
<input type="button" value='Calculate Sum' onclick="sumOfNumbers()"/>

• HTML标签转义字符错误：原代码里的<、>是HTML转义字符，直接写入代码文件会被浏览器错误解析，导致输入框无法正常显示。需要替换为实际的<和>符号。
• 输入值类型不匹配：通过value获取的输入内容是字符串类型，直接和数字比较会引发逻辑错误，需要将其转换为数字类型（比如用parseInt()或Number()）。
• 函数执行时机问题：确保JS函数在HTML元素加载完成后可被调用，建议将JS代码放在HTML内容之后，避免因元素未加载导致获取失败。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
  <input type='text' id='txtNumber'>
  <input type="button" value='Calculate Sum' onclick="sumOfNumbers()"/>

  <script>
    function sumOfNumbers() {
      // 将输入值转为整数
      var theNumber = parseInt(document.getElementById("txtNumber").value);
      // 校验是否为有效正整数
      if (!isNaN(theNumber) && theNumber > 0) {
        var theSum = 0;
        for (var i = 1; i <= theNumber; i++) {
          theSum += i;
        }
        alert("1到" + theNumber + "的累加和是：" + theSum);
      } else {
        alert("请输入有效的正数字！");
      }
    }
  </script>
</body>
</html>

• 增加了isNaN()校验，避免输入非数字内容时出现逻辑错误。
• 将弹窗提示改为中文，更符合使用习惯。

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