Question

我做错了什么？根据教科书示例，这应该是足够的代码，但在浏览器中运行时我得到NaN。

<!DOCTYPE html>
    <html lang="en"> 
    <meta charset="utf-8"/>
    <html>
      <head>
        <title>test</title>
      </head>
    <body>

    <p>Vekt: <input type="text" id="txtVekt" /></p>
    <p>Hoyde: <input type="text" id="txtHoyde" /></p>
      <button id="btnBeregn">Beregn</button>
      <p id="resultat"></p>

      <script>
    window.onload = beregn();


      function beregn(){
        var hoyde = document.getElementById("txtHoyde").value;
        var vekt = document.getElementById("txtVekt").value;

        var bmi = vekt / (hoyde * vekt);

        document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
      }

    </script>

      </body>
    </html>

Answer 1

由于输入为空，

hoyde和vekt在页面加载时没有任何值，因此bmi没有理由为您提供除{{1}以外的任何内容}。

您需要为这些输入提供默认值（可能为1开始），然后在单击按钮时重新运行NaN函数：

begregn

或者只是在窗口加载时不运行<p>Vekt: <input type="text" id="txtVekt" value=1/></p> <p>Hoyde: <input type="text" id="txtHoyde" value=1/></p> <button id="btnBeregn" onclick="begregn()">Beregn</button>，但仅在单击按钮时运行

Answer 2

window.onload在窗口加载时运行.... ：）

将window.onload = beregn();更改为：

var btn = document.getElementById("btnBeregn"); btn.addEventListener("click", beregn);

Answer 3

首次运行该功能时，您的值未初始化
特别是没有必要运行函数onload 因为您的值未初始化。请注意，我的代码会删除onload调用。

单击按钮时可以运行计算。您可能还想在运行该函数之前添加一些验证，但我会将该练习留给您。

  <body>
 <p>Vekt: <input type="text" id="txtVekt" /></p>
    <p>Hoyde: <input type="text" id="txtHoyde" /></p>
      <button id="btnBeregn" onclick="beregn();" >Beregn</button>
      <p id="resultat"></p>

      <script>
      function beregn(){
        var hoyde = document.getElementById("txtHoyde").value;
        var vekt = document.getElementById("txtVekt").value;

        //this assumes your inputs are valid numbers...
        var bmi = vekt / (hoyde * vekt);

        document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
      }

    </script>

   </body>

NaN，运行BMI计算器时

3 个答案: