JavaScript中querySelector获取输入框值不生效问题咨询

• 第一，querySelector 用法不符合API规范
  document.querySelector() 仅返回匹配选择规则的第一个DOM元素，不是元素集合，不需要加[0]做索引取值。只有getElementsByClassName这类返回HTMLCollection集合的API才需要用索引取对应元素。你给querySelector的返回值加[0]，相当于尝试读取单个元素不存在的0属性，得到undefined后调用value自然会抛出异常。
• 第二，stdWeight的选择器缺少类名前缀
  类选择器需要加.前缀才能匹配对应class的元素，你代码中写的是document.querySelector("stdWeight")，会被解析为查找标签名为stdWeight的元素，完全匹配不到对应输入框。
• 第三，BMI计算公式存在逻辑错误
  运算优先级问题导致你的现有代码等价于直接计算703 * 体重，除以身高之后又乘了相同的身高，结果完全不符合英制BMI的计算规则。正确公式应为703 * 体重(磅) / (身高(英寸)的平方)，需要给身高乘积部分加括号明确运算顺序。

你替换为getElementsByClassName后可以正常运行的原因是：该API入参直接传入class名不需要加.前缀，且返回值为元素集合需要用[0]取第一个匹配元素，刚好和你写的代码逻辑匹配，因此不会报错。

修正后的可运行代码 #

function stdCalculator() {
  let stdHeight = document.querySelector(".stdHeight").value
  let stdWeight = document.querySelector(".stdWeight").value
  let stdDsply = document.querySelector(".stdReslt")
  let stdBmi = (703 * Number(stdWeight)) / (Number(stdHeight) * Number(stdHeight))
  stdDsply.innerHTML = stdBmi.toFixed(2);
}

内容的提问来源于stack exchange，提问作者Ganda W Maung