Question

我在html正文中有一个用于BMI计算器的javascript。到目前为止，一切都在按照自己的意愿行事。我只需要帮助处理两件我无法弄清楚的事情。首先，我无法将输出BMI计算得到2位小数。我尝试过使用toFixed（2）和double，没有运气。

并且当您输入第一个变量时，它会突出显示表中的注释。当您执行第二次输入（具有不同的结果）时，它会突出显示一个新字段并保留旧字段。（没有刷新自己）也无法想象。

下面的脚本

        <html>

      <head>

    <title>Body Mass Index (BMI) Calculator</title>
    <script language="JavaScript">
    //Variables Input

    <!--
        function calcBmi() {
var weight = document.bmiForm.weight.value //Input of Weight

var height = document.bmiForm.height.value //Input of Height



//Calculation of BMI

if(weight > 0 && height > 0){   
var finalbmi = weight/(height/100*height/100)
document.bmiForm.finalbmi.value = finalbmi

//Incorrect Input of Numeric Variables
var rvalue = true
if ( (weight < 30) || (weight > 450) ) 
    {   alert ("Invalid weight. Please check and re-enter");
        rvalue = false
    }
if ( (height < 80) || (height > 300) ) 
        {   alert ("Invalid Height. Please check and re-enter");
        rvalue = false
    }
//Highlighted Decisions are made below

if(finalbmi < 18){
document.getElementById('tr1').style.backgroundColor="grey";
    }
    if(finalbmi > 18 && finalbmi < 19.999){
    document.getElementById('tr2').style.backgroundColor="grey";
}
if(finalbmi > 20 && finalbmi < 25.999){
document.getElementById('tr3').style.backgroundColor="grey";
}
if(finalbmi > 26 && finalbmi < 30.999){
document.getElementById('tr4').style.backgroundColor="grey";
}
if(finalbmi > 31){
document.getElementById('tr5').style.backgroundColor="grey";
}
}
//Incorrect Characters Inserted, this message is an error code
else{
alert("Error, Please Fill In Numeric values Only ") 
}
}
//-->
//--> CSS Style Formatting
</script>
    <style>
        .container {
            width: 100%;
            }
        .wrapper {
            margin: 0 auto; 
            width: 800px;
            }
        table {
            width: 500px;
            border: 10px solid #666;
            margin: 0 auto;
            }
        form {
            text-align: center;
            }
    </style>
  </head>

  <body>
  <div class="container">
    <div class="wrapper">
        <form name="bmiForm">
            <p>
            <p>
            Your Weight(kg): <input type="text" name="weight" size="11"><br />
            <p>
            <p>
            Your Height(cm): <input type="text" name="height" size="11"><br />
            <p>
            <p>
            <input type="button" value="Calculate BMI" onClick="calcBmi()"><br />

            <p>
            <p>
            Your BMI: <input type="text" name="finalbmi" size="11"><br />
            <p>
            <p>
            <!--Highlighted Desicions shown below -->
            <table id="bmitable" border="1" width="40%" cellpadding="5"     cellspacing="5" style="background-color:white;">
            <tr id='tr1'>
                     <td colspan="2"><font size="2">Under 18 - Your Are     Very Underweight and Possibly Malnourished.</font></td>
            </tr>
        <tr id='tr2'>
                     <td colspan="2"><font size="2">Under 20 - You Are     Underweight and Could Afford to Gain a Little Weight.</font></td>
        </tr>
            <tr id='tr3'>
                     <td colspan="2"><font size="2">20 to 25 - You Have a     Healthy Weight Range for a Young and Middle-Aged Adults.</font></td>
            </tr>
            <tr id='tr4'>
                     <td colspan="2"><font size="2">26 to 30 - You Are     Overweight.<font></td>
            </tr>
            <tr id='tr5'>
                     <td colspan="2"><font size="2">Over 30 - You Are     Obese</font></td>
            </tr>
            </table>
        </form>
    </div>  
<div>
</body>

</html>

Answer 1

toFixed为我工作

document.bmiForm.finalbmi.value = new Number(finalbmi).toFixed(2);

您还需要将其他trs的背景设置为白色，如下所示

if(finalbmi < 18){
     document.getElementById('tr1').style.backgroundColor="grey";
}
else{
     document.getElementById('tr1').style.backgroundColor="white";
}

Click Here for Fiddle

舍入到小数位数

1 个答案: