JavaScript编写BMI计算器始终返回NaN问题求助

我正在用JavaScript开发BMI计算器，但计算结果一直返回NaN。试过用parseInt()、parseFloat()和Number()做类型转换，都没解决。确定问题出在imc变量上——用具体数值替换height和weight就不会返回NaN，但不知道具体原因。控制台也没有报错信息，求帮忙解决。

原代码 #

HTML

<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>Calculateur d'IMC</title>
  <link rel="stylesheet" href="imc.css">
  <script src="imc.js"></script>
</head>

<body>
<h1>Calculateur d'IMC</h1>
<h2>Bienvenue! Entrez vos informations ci-dessous pour calculer votre IMC.</h2>

<div id="calcul">
    <h3>Poids:</h3>
    <input type="number" id="weightInput" placeholder="Votre poids..."></input>

    <h3>Taille:</h3>
    <input type="number" id="heightInput" placeholder="Votre taille..."></input><br/>
</div>

<button onclick="calculate()" id="button1">Calculez!</button>

<div id="result"></div>

<script src="imc.js"></script>
</body>
</html>

JavaScript

var height = document.querySelector('#heightInput'.value);

var element = document.querySelector('button');


function calculate() {
    let imc = (weight / (height) **2);
    console.log(imc);
    alert('Vous avez un IMC de ' + imc + '!');
    return imc;
}

1. DOM元素获取语法错误：document.querySelector('#heightInput'.value)写法错误，.value应该放在querySelector调用之后，而非字符串内部；且完全未获取weightInput的元素，weight变量未定义。
2. 变量时机错误：页面初始化时就获取输入框值，此时输入框为空，就算获取正确也拿到空值；必须在点击按钮计算时，实时获取输入框的最新值。

HTML（无需修改）

<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>Calculateur d'IMC</title>
  <link rel="stylesheet" href="imc.css">
</head>

<body>
<h1>Calculateur d'IMC</h1>
<h2>Bienvenue! Entrez vos informations ci-dessous pour calculer votre IMC.</h2>

<div id="calcul">
    <h3>Poids:</h3>
    <input type="number" id="weightInput" placeholder="Votre poids..."></input>

    <h3>Taille:</h3>
    <input type="number" id="heightInput" placeholder="Votre taille..."></input><br/>
</div>

<button onclick="calculate()" id="button1">Calculez!</button>

<div id="result"></div>

<script src="imc.js"></script>
</body>
</html>

JavaScript

function calculate() {
    // 实时获取输入框的数值并转换为浮点数
    const weight = parseFloat(document.querySelector('#weightInput').value);
    const height = parseFloat(document.querySelector('#heightInput').value);
    
    // 校验输入有效性
    if (isNaN(weight) || isNaN(height) || height <= 0) {
        alert("Veuillez entrer des valeurs valides pour le poids et la taille!");
        return;
    }
    
    // 计算BMI并保留两位小数
    const imc = weight / (height ** 2);
    console.log(imc);
    alert(`Vous avez un IMC de ${imc.toFixed(2)}!`);
    // 将结果显示到页面
    document.getElementById('result').textContent = `Votre IMC est : ${imc.toFixed(2)}`;
    return imc;
}

• 将获取输入值的操作移到calculate函数内部，确保每次点击按钮时拿到最新输入内容
• 正确调用querySelector后获取.value，并用parseFloat转换为数值类型
• 添加输入有效性判断，避免空值或无效数值导致错误
• 用toFixed(2)格式化结果为两位小数，提升用户体验

内容的提问来源于stack exchange，提问作者C-Rollot