BMI计算器无法显示结果：Uncaught ReferenceError错误求助

报错原因 #

1. 按钮元素获取失败：JS代码里用document.getElementById('calculateButton')获取按钮，但HTML中的按钮仅设置了class="calculate-button"，没有对应的id属性，导致获取结果为null，调用addEventListener时触发错误，影响后续代码执行。
2. onclick属性与事件监听器冲突：按钮同时设置了onclick="calculateBMI()"，如果JS代码加载时机过早（比如放在<head>标签中），点击按钮时calculateBMI函数还未被定义，就会抛出"calculateBMI is not defined"的错误。
3. 身高单位未转换：输入的身高是厘米，但BMI计算需要以米为单位，直接计算会导致结果严重偏差。

解决步骤 #

1. 给按钮添加id属性：在HTML的<button>标签中补充id="calculateButton"，确保JS能正确定位到按钮。
2. 移除按钮的onclick属性：删除onclick="calculateBMI()"，避免重复触发事件和全局作用域依赖问题。
3. 调整JS加载逻辑：用DOMContentLoaded事件包裹JS代码，确保DOM元素加载完成后再执行JS。
4. 修正BMI计算逻辑：将输入的身高值除以100转换为米，再进行计算，同时增加输入有效性验证。

修正后的完整代码 #

HTML代码

<div class="calculator-container">
  <h2>Calculator BMI</h2>
  <div class="input-group">
    <label for="weight">Greutate (kg):</label>
    <input type="number" id="weight" min="0" step="0.1">
  </div>
  <div class="input-group">
    <label for="height">Inaltime (cm):</label>
    <input type="number" id="height" min="0" step="1">
  </div>
  <button class="calculate-button" id="calculateButton">Calculeaza BMI</button>
  <div class="result" id="result"></div>
</div>

CSS代码

body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  text-align: center;
}

.calculator-container {
  max-width: 400px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 50px;
}

.calculator-container h2 {
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.calculate-button {
  background-color: #007BFF;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.result {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

JS代码

document.addEventListener('DOMContentLoaded', function() {
  var calculateButton = document.getElementById('calculateButton');
  calculateButton.addEventListener('click', calculateBMI);

  function calculateBMI() {
    var weight = parseFloat(document.getElementById('weight').value);
    var height = parseFloat(document.getElementById('height').value);
    
    if (!isNaN(weight) && !isNaN(height) && weight > 0 && height > 0) {
      height = height / 100;
      var bmi = weight / (height * height);
      var resultElement = document.getElementById('result');
      resultElement.textContent = "Your BMI is " + bmi.toFixed(2);
    } else {
      document.getElementById('result').textContent = "请输入有效的体重和身高数值";
    }
  }
});

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