求助：BMI计算器JavaScript结果无法渲染问题排查

我是前端开发新手，正在学习使用HTML、CSS和JavaScript制作小型项目。我制作了一个简易BMI计算器，该计算器本应在用户输入所有必要信息后，点击按钮显示计算结果，但点击后无任何结果显示。

代码文件 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>BMI Calculator</title>
  </head>
  <body>
    <div class="container">
      <h2>BMI Calculator</h2>
      <form id="BMIForm">
        <label for="gender">Gender: </label>
        <select id="gender" required>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
          <option value="Third Gender">Third Gender</option>
        </select>

        <label for="age">Age:</label>
        <input type="number" id="age" placeholder="Enter Age" required />

        <label for="height-feet">Height:</label>
        <input type="number" id="heigt-feet" placeholder="Feet" required />
        <input type="number" id="height-inches" placeholder="inches" />

        <label for="weight">Weight: </label>
        <input type="number" id="weight" placeholder="Enter Weight in Kgs" />

        <input type="submit" value="Calculate BMI" />
      </form>

      <div id="result"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

style.css #

body{
    background-color: rgba(104, 3, 163, 0.801);
}

.container {
    max-width: 400px;
    margin: 200px auto;
    padding: 20px;
    background-color: #da6161;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(1, 1, 1, 0.6);
    
}

h2 {
    margin-top: 0;
    color: #3a3838;
    text-align: center;
    text-decoration:underline ;

}

form {
    margin-bottom: 50px;
    display:flex;
    flex-direction:column;
}

label {
    font-size:larger;
    font-weight: 1000px;
    margin-bottom: 5px;
    color: #ffffff;
}

input[type="number"],
select {

    width: 95%;
    padding: 10px;
    border: none;
    background-color: #caadad;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

input[type="number"] :focus,
select :focus {
    outline: none;
    box-shadow: 0px 0px 0px 5px rgb(0, 0, 0);

}

select {
    width: 100%;
}

input[type="submit"]{
    padding: 10px;
    margin-top: 10px;
    background-color: rgb(2, 4, 92);
    border: none;
    border-radius: 50px;
    color: #fdfdfd;
    cursor: pointer;
    transition: background-color 0.1s ease;

}

input[type="submit"]:hover {
    background-color: blueviolet;
}

#result {
    font-weight: bold;
    margin-top: 10px;
    color: black;
}

script.js #

document.getElementById('BMIForm').addEventListener('submit',function(e){
    e.preventDefault(); //阻止页面自动刷新

    const gender = document.getElementById('gender').value;
    const age = parseInt(document.getElementById('age').value); 
    const heightFeet = parseInt(document.getElementById('height-feet').value);
    const heightInches = parseInt(document.getElementById('heigh-inches').value);
    const weight = parseFloat(document.getElementById('weight').value);

    if(gender && age && heightFeet && heightInches && weight){
        const heightInMeters = (heightFeet * 12 + heightInches) * 0.0254; //转换为米
        const bmi = weight / (heightInMeters*heightInMeters);
        const resultElement = document.getElementById('result');

        let category = '';
        if(bmi < 18.5){
            category = 'Under Weight';
        }else if(bmi >= 18.5 && bmi < 25){
            category = 'Normal Weight';
        }else if(bmi >= 25 && bmi < 30){
            category = 'Over Weight';
        }else{
            category += 'Obese';
        }

        let resultMessage = 'Your BMI: ' + bmi.toFixed(2) + '<br>';
        resultMessage += 'Category: ' + category;

        resultElement.innerHTML = resultMessage;
    }
});

问题现象 #

点击计算按钮后，resultElement.innerHTML = resultMessage;这行代码本应渲染计算结果，但实际无任何内容显示。

操作截图 #

• 输入前状态：
  
• 输入后点击按钮状态：
  

问题原因及修复方案 #

1. ID拼写错误（核心问题） #

• HTML中身高英尺输入框的ID是heigt-feet（少了字母h），但JS中获取的是height-feet，导致heightFeet值为NaN
• HTML中身高英寸输入框的ID是height-inches，但JS中获取的是heigh-inches（少了字母t），导致heightInches值为NaN

修复：

• 修改HTML中英尺输入框的ID：

<input type="number" id="height-feet" placeholder="Feet" required />

• 修改JS中获取英寸输入框的代码：

const heightInches = parseInt(document.getElementById('height-inches').value);

2. 缺少必填校验 #

体重输入框没有添加required属性，用户未输入时weight值为NaN，导致条件判断不通过。

修复：给体重输入框添加required：

<input type="number" id="weight" placeholder="Enter Weight in Kgs" required />

3. 条件判断优化（可选） #

原条件判断依赖变量的真值性，但parseInt/parseFloat在输入空值时会返回NaN，可以显式检查是否为有效数字，避免意外情况：

if(gender && !isNaN(age) && !isNaN(heightFeet) && !isNaN(heightInches) && !isNaN(weight)){
    // 计算逻辑
}

修正后的完整JS代码 #

document.getElementById('BMIForm').addEventListener('submit',function(e){
    e.preventDefault();

    const gender = document.getElementById('gender').value;
    const age = parseInt(document.getElementById('age').value);
    const heightFeet = parseInt(document.getElementById('height-feet').value);
    const heightInches = parseInt(document.getElementById('height-inches').value);
    const weight = parseFloat(document.getElementById('weight').value);

    if(gender && !isNaN(age) && !isNaN(heightFeet) && !isNaN(heightInches) && !isNaN(weight)){
        const heightInMeters = (heightFeet * 12 + heightInches) * 0.0254;
        const bmi = weight / (heightInMeters*heightInMeters);
        const resultElement = document.getElementById('result');

        let category = '';
        if(bmi < 18.5){
            category = 'Under Weight';
        }else if(bmi >= 18.5 && bmi < 25){
            category = 'Normal Weight';
        }else if(bmi >= 25 && bmi < 30){
            category = 'Over Weight';
        }else{
            category = 'Obese';
        }

        let resultMessage = `Your BMI: ${bmi.toFixed(2)}<br>`;
        resultMessage += `Category: ${category}`;

        resultElement.innerHTML = resultMessage;
    }
});

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