Question

我是JS的新手，我正在尝试进行简单的体重计算。它需要用户身高和体重进行计算并将其显示在屏幕上。我做了什么。现在我的问题是我想将结果显示为＆＃34;清除信息＆＃34;按钮。我想使用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>

Answer 1

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

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

这会将id ==＆＃34; total＆＃34;的span元素的HTML内容更改为变量＆＃34; New＆＃34;的值。

所以它看起来像这样。

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

如何写一个变量undeath边界

1 个答案: