TDEE计算器表单数据无法传入JS对象问题排查

以下是几个最可能导致问题的原因及对应解决方法：

• 表单输入未做类型转换
  表单所有输入默认都是字符串类型，直接用这些值做算术运算（比如计算BMR、TDEE）必然会出现NaN。比如你获取年龄时直接用document.getElementById('age').value，得到的是字符串，和数字相乘就会变成NaN。
  错误示例：

  const userData = {
    age: document.getElementById('age').value,
    weight: document.getElementById('weight').value
  };
  

  修复：用Number()或parseFloat()/parseInt()把数值类字段转成数字：

  const userData = {
    age: Number(document.getElementById('age').value),
    weight: parseFloat(document.getElementById('weight').value)
  };
  

• 表单提交的默认行为没阻止
  表单提交会触发页面刷新，页面一刷新所有JS变量都会被重置，你的计算函数还没处理数据就丢失了，自然输出undefined。
  错误示例：

  document.getElementById('calcForm').addEventListener('submit', function() {
    // 处理数据的代码
  });
  

  修复：在事件处理函数里调用event.preventDefault()：

  document.getElementById('calcForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止页面刷新
    // 后续数据处理逻辑
  });
  

• 变量作用域不匹配
  如果捕获表单数据的变量是在提交事件的内部函数里声明的，而你的TDEE计算函数在外部，外部函数根本访问不到内部变量，结果就是undefined。
  错误示例：

  document.getElementById('calcForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const userData = { /* 捕获的数据 */ };
  });
  
  function calculateTDEE() {
    console.log(userData.age); // undefined，作用域不允许访问
  }
  

  修复：要么把计算函数挪到事件处理函数内部，要么把userData提升到全局作用域（或者用闭包、模块模式）：

  let userData; // 全局作用域声明变量
  
  document.getElementById('calcForm').addEventListener('submit', function(e) {
    e.preventDefault();
    userData = {
      age: Number(document.getElementById('age').value),
      // 其他字段
    };
    calculateTDEE();
  });
  
  function calculateTDEE() {
    console.log(userData.age); // 正常访问
  }
  

• 表单元素ID匹配错误
  检查JS里获取元素的ID和HTML表单里的ID是否完全一致，比如HTML里是<input id="userAge">，JS里写document.getElementById('age')，就会拿到null，访问value自然是undefined。可以在控制台打印document.getElementById('xxx')，看是否为null来验证。

• JS代码执行时机不对
  如果你的JS代码写在<head>标签里，DOM还没加载完成就执行了，此时获取表单元素会得到null，后续操作全错。
  修复：把JS代码放在<body>标签末尾，或者用DOMContentLoaded事件包裹：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有表单相关的JS逻辑都放在这里
  });
  

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