如何编写一个不死边界的变量

How to write a variable undeath the border

本文关键字：边界 变量 一个 何编写      更新时间：2024-03-31

我是JS的新手，我正在尝试进行一个简单的体重计算。它会计算用户的身高和体重并将其显示在屏幕上。我已经做到了。现在我的问题是，我想将结果显示为"清除信息"按钮下的文本。我想使用DOM来完成此操作。

请帮忙！

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Assignment 4 Starter File</title>
    <style>
      h1 {text-align: center;}
      #calculator
      {
        width: 600px;
        margin: 0px auto;
        border: 2px solid #000;
        padding: 20px;
      }
      #values
      {
        width: 600px;
        margin: 50px auto;
        pading: 20px;
      }
      ul {margin-top: 5px;}

    </style>
    <script>

        // code to be called when button is clicked goes here
        function calculateResult() {
        // this gets the weight
        var weight = document.getElementById("weight").value;
        //this gets the height
            var height = document.getElementById("height").value;
            // this calcualtes thet total with a
            var calculate = (weight / Math.pow(height,2)) * 703;
            //rounds to the 2
            var New = calculate.toFixed(2);
            New = parseInt(New);
            alert(New);
          //  alert(" your weight is" + weight);
    if(calculate <=18){
        ("your BMI IS: " + calculate );
      // alert("your less then 18");
        }


        }
        window.onload = function() {
        // reference the button to be clicked  
        var btnCalculate = document.getElementById("calculate");

        // calls the function when the button is clicked
          btnCalculate.onclick = calculateResult; 
        }
    </script>

    </head>
    <body>
      <header>
        <h1>Body Mass Index (BMI) Calculator</h1>  
      </header>

      <section id="calculator">
        <p>
          To determine if you're at a healthy weight, enter the following information
          and calculate your body mass index (BMI). <span>Enter numbers only please</span>
        </p>  
          <form>
        <label for="weight" >Weight (lbs):</label>
        <br>
        <input type="text" id="weight">
        <br>
        <br>
        <label for="height" >Height (inches):</label>
        <br>
        <input type="text" id="height">
        <br>
        <br>       
        <input type="button" id="calculate" value="Click to Calculate Your BMI"> <br>
        <br>
        <input type="reset" value="Clear the Information"> 
    <p style="color: red">The total is <span id= "total"> </span></p></p>

      </section>

      <section id="values">

        BMI values are as follows:
        <ul>
          <li>Below 18: Underweight</li>
          <li>Between 18 and 24.9 : Normal</li>
          <li>Between 25 and 29.9 : Overweight</li>
          <li>Over 30 : Obese</li>
        </ul>
        </p>
      </section>
    <script type="text/javascript">

        </script>
    </body>
    </html>

为了实现这一点，您将使用innerHTML属性。这将返回或设置元素的HTML内容。

所以我要做的是在calculateResult()函数中将alert(New);切换为document.getElementById("total").innerHTML = New;。

这将把id＝"total"的span元素的HTML内容更改为变量"New"的值。

所以它看起来像这样。

function calculateResult() {
    // this gets the weight
    var weight = document.getElementById("weight").value;
    //this gets the height
    var height = document.getElementById("height").value;
    // this calcualtes thet total with a
    var calculate = (weight / Math.pow(height,2)) * 703;
    //rounds to the 2
    var New = calculate.toFixed(2);
    New = parseInt(New);
    document.getElementById("total").innerHTML = New;

JSFiddle

相关文章：