JS厨房单位转换器函数提交后显示undefined问题求助

你的代码出现undefined弹窗主要有这几个核心问题：

1. 过早获取输入值，未同步用户实时输入 #

页面加载时你就获取了input-1和input-2的值，此时输入框是空的，且后续用户输入内容后，这两个变量不会自动更新为最新值。

2. 函数参数重名+调用传值无效 #

convertUnits函数里定义了同名的unit1、unit2参数，会直接覆盖外部全局变量；而且点击提交时传递的unit1、unit2是页面加载时的空值，并非用户输入后的最新内容。

3. 错误访问非DOM对象的value属性 #

conversion是unit1 + unit2的计算结果（字符串拼接或数字相加），它本身不是DOM元素，没有value属性，所以conversion.value必然返回undefined。

4. 表单默认提交导致页面刷新 #

点击submit按钮会触发表单默认提交行为，页面会直接刷新，弹窗刚出现就会被刷新掉。

修正后的代码 #

HTML部分（移除无效action，绑定表单提交事件）

<body>
  <h1>Kitchen Calculator</h1>
  
  <form id="conversionForm">
    <input type="text" id="input-1" name="First Amount">
    
    <div class="dropdown">
      <button class="dropbtn">Units</button>
      <div class="dropdown-content">
        <button>Teaspoon</button>
        <button onclick="">Tablespoon</button>
        <button onclick="">Cup</button>
        <button onclick="">Quart</button>
        <button onclick="">Pint</button>
        <button onclick="">Liter</button>
        <button onclick="">Dash</button>
        <button onclick="">Pinch</button>
      </div>
    </div>
    
    =
    
    <input type="text" id="input-2" name="Second Amount">
    
    <div class="dropdown">
      <button class="dropbtn">Units</button>
      <div class="dropdown-content">
        <button onclick="">Teaspoon</button>
        <button onclick="">Tablespoon</button>
        <button onclick="">Cup</button>
        <button onclick="">Quart</button>
        <button onclick="">Pint</button>
        <button onclick="">Liter</button>
        <button onclick="">Dash</button>
        <button onclick="">Pinch</button>
      </div>
    </div>
    
    <input type="submit" value="Submit">
  </form>
  <script src="script.js"></script>
</body>

JavaScript部分（实时获取输入值，阻止默认提交）

// 获取表单元素
const form = document.getElementById('conversionForm');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  
  // 提交时才获取用户最新输入值
  const unit1 = document.getElementById("input-1").value;
  const unit2 = document.getElementById("input-2").value;
  
  // 这里是临时相加逻辑，后续替换为实际单位转换公式即可
  const conversion = parseFloat(unit1) + parseFloat(unit2);
  
  // 直接显示计算结果
  alert(conversion);
});

后续实现单位转换逻辑时，只需要把conversion的计算部分替换为对应换算公式即可（比如teaspoon转tablespoon是除以3）。

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