如何写一个变量undeath边界

问题描述：

我对JS很新，我试图做一个简单的体重计算。它需要用户的身高和体重进行计算并将其显示在屏幕上。我已经完成了。现在我的问题是我想在“清除信息”按钮下显示结果作为文本。我想使用DOM来做到这一点。如何写一个变量undeath边界

请任何帮助！

<!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>

看到这个答案：http://stackoverflow.com/questions/1535268/js-how-to-dynamically-insert-text-into-a-span 基本上，您使用getElementById（）检索范围并将要显示的结果分配到其innerHTML字段中。 – Tonkleton 2015-02-23 23:24:55

答

为了达到此目的，您将使用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

谢谢！也是最后一件事。所以我想说的是，如果这个数字少于18，我想显示你（那里的数字），并且你的体重不足。我尝试使用calculate变量添加If语句。这是正确的路吗？ – 2015-02-23 23:54:54

当然。你在正确的轨道上。 – Magnus 2015-02-24 00:07:23

所以，如果（计算 2015-02-24 00:23:37

如何写一个变量undeath边界

相关推荐