javascript - 如何获取输入值[类型 ="number"]

Question

<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);

Answer 1

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

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);