如何用JavaScript为HTML p标签赋值？BMI计算器结果无法显示

你的代码存在几个关键问题导致结果无法展示，下面逐一说明并给出修正方案：

核心问题分析 #

• getElementsByClassName返回元素集合，需指定单个元素
  这个方法会返回所有匹配类名的元素组成的HTMLCollection，直接给它赋值.value或.innerText无效，必须通过索引[0]获取目标p标签。

• 按钮点击事件未正确触发函数
  按钮的onclick="BMIcalc"仅引用了函数名，没有执行函数，需写成onclick="BMIcalc()"才能触发调用。

• 输入值未转为数字类型
  输入框的value是字符串类型，直接用于计算可能出现错误，需先转为数字再运算。

• 原代码存在语法错误
  第一个JS片段中函数结尾多了一个});，会导致函数无法正常运行。

修正后的完整代码 #

HTML部分 #

<form>
  <label for="height">Please input your height:</label>
  <input id="height" type="text" name="" value="" placeholder="height">
  <label for="weight">Please input your weight:</label>
  <input id="weight" type="text" name="" value="" placeholder="weight">
  <button onclick="BMIcalc()" type="button" name="button">Submit</button>
</form>

<h3>Your BMI is: </h3>
<p class="result"></p>

JavaScript部分 #

let myHeight = document.getElementById("height");
let myWeight = document.getElementById("weight");
// 获取第一个匹配的.result元素
let answer = document.getElementsByClassName("result")[0];

function BMIcalc() {
  // 将输入值转为数字
  const height = Number(myHeight.value);
  const weight = Number(myWeight.value);
  
  // 更严谨的输入校验：排除非数字、0值
  if (isNaN(height) || isNaN(weight) || height === 0 || weight === 0) {
    alert("Please fill in valid height and weight!");
  } else {
    const BMI = weight / (height ** 2);
    // 用innerText设置p标签内容，保留两位小数提升可读性
    answer.innerText = BMI.toFixed(2);
  }
}

额外优化说明 #

• 新增严谨的输入校验，避免用户输入非数字或0导致计算异常。
• 用toFixed(2)将BMI值保留两位小数，显示更直观友好。
• 也可以用textContent替代innerText，两者效果相近，textContent兼容性更广泛。

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