javascript - 如何获取输入的值[type =“number”]

<select id="height" name="" id="">
   <option value="FEET">FEET</option>
   <option value="INCHES">INCHES</option>
</select>
    <input id="heightNum" type="number">

当我单击btn时，我希望显示heightNum内的数字。但是我要么在控制台中得到一个空白行，要么为“ 0”。因此，如果在输入中输入“ 123”，我仍然会收到“ 0”或空白行。提前致谢。

var height = document.getElementById('height').value.toLowerCase();
var heightNum =  document.getElementById('heightNum').value;

function calcBmi () {
if (height=="feet") {
console.log(heightNum);
 }
}

btn.addEventListener('click', calcBmi);

最佳答案

您对何时将值分配给变量感到困惑。

heightNum是一个变量，该变量在首次加载页面时会初始化一次。当heightNum元素更改时，该值不会自动更新。

只需在calcBmi中获取控制值。然后，您知道将在触发click事件时按原样获取值。

function calcBmi () {
    var height = document.getElementById('height').value.toLowerCase();
    var heightNum =  document.getElementById('heightNum').value;
    if (height=="feet") {
        console.log(heightNum);
     }
   }

btn.addEventListener('click', calcBmi);