HTML简易计算器求和功能异常问题求助

问题根源 #

• getElementsByName('One')返回的是元素集合，不是单个输入框，直接访问.value会得到undefined，两个undefined相加就会出现NaN
• 输入框默认值是字符串类型，直接用+会执行字符串拼接，而非数字求和
• HTML结构错误：<form>标签在<body>外面，不符合HTML规范，可能导致元素获取异常
• 函数内的变量c未声明，会隐式成为全局变量，存在风险

修正后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>简易计算器</title>
    <script>
      function calc() {
        // 通过ID获取输入框元素
        const num1 = document.getElementById("Num1");
        const num2 = document.getElementById("Num2");
        
        // 将输入值转为数字，空值默认0
        const value1 = parseFloat(num1.value) || 0;
        const value2 = parseFloat(num2.value) || 0;
        
        // 计算并赋值
        const result = value1 + value2;
        num1.value = result;
      }
    </script>
  </head>
  <body>
    <p id="label">点击按钮计算求和</p>
    <button onclick="calc()">计算求和</button>
    
    <form>
      <input type="text" id="Num1" name="One"> <br>
      <input type="text" id="Num2" name="Two"> <br>
    </form>
  </body>
</html>

关键修改说明 #

• 把按钮点击事件的参数传递改成在函数内部获取元素，更清晰且避免集合访问错误
• 使用parseFloat将输入的字符串转为数字，同时用|| 0处理空输入的情况（避免空值转为NaN）
• 修正HTML结构，将<form>放到<body>内部
• 声明所有变量（用const），避免全局变量污染
• 给按钮添加了显示文本，方便操作

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