Question

我已经创建了一个用于计算BMI的应用程序。基本上，这就是我希望应用程序正常工作的方式，并在下面进行了编写：

您只需输入以英寸为单位的身高，然后以磅为单位输入体重。
应用程序将计算您的BMI，然后告诉您体重过轻，正常，肥胖还是超重。
如果您输入的身高或体重的非正值，程序将显示一条错误消息“输入无效。请输入正数。”，它将突出显示您需要的框修正/输入有效值。

我遇到了2个问题。

我可以获取显示BMI结果的程序，但是目前我不知道如何编写程序来显示用户体重不足，正常，肥胖还是超重。如果BMI <18.5，那么体重过轻； BMI> = 18.5，并且<= 24.99，那么正常； BMI> 25，<= 29.99，然后肥胖； BMI> 30，然后超重。
我想在“ Calculate BMI”（计算BMI）按钮下方显示错误信息（告诉用户输入正值，不要缺少或为负值），而不是显示为“此页面显示-无效输入”的警告对于重量，请输入一个非负数。”换句话说，我想保留相同的消息，但不使用“警报”方法。

请问如何解决这些问题？我在下面附加了HTML和CSS代码。

非常感谢您！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>BMI Calculation</title>
    <link rel="stylesheet" href="bmi.css">

</head>
<body>
    <main>
        <h2>Body Mass Index Calculation Application</h2>

        <label for="boxHeight">Enter height in inches:</label>
        <input type='text' id='boxHeight'/><br>

        <label for="boxWeight">Enter weight in pounds:</label>
        <input type='text' id='boxWeight'/><br>

        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate">

        <div class="results"></div>

    </main>     
    <script>
        var processEntries = function() {   

             var heightInputBox = document.getElementById("boxHeight");
             var weightInputBox = document.getElementById("boxWeight");
             var outputBMI = document.querySelectorAll("div.results");

             outputBMI[0].textContent = "";
             heightInputBox.className = "";
             weightInputBox.className = "";

             console.log(heightInputBox.getAttribute('class'));

            ///get user input from input box "boxHeight" by using value property, 
            //which return user input as a string               
            //step1.1:get height input and convert height to a number
            var height = heightInputBox.value;
            height = parseFloat(height);

            //step1.2:get weight input and convert weight to a number
            var weight = weightInputBox.value;
            weight = parseFloat(weight);

            var valid = true;           
            if (isNaN(height)||height <0) {
                alert("Invalid input for height, enter a non-negative number.");
                heightInputBox.className = "error";
                valid = false;
            } 

            if (isNaN(weight)||weight <0) {
                alert("Invalid input for weight, enter a non-negative number.");
                weightInputBox.setAttribute('class', "error");
                valid = false;
            }

            if (valid)          //calculate BMI
            {
                outputBMI[0].textContent  ="Your BMI is: " + (703 * weight / (height*height)).toFixed(1);
            if (outputBMI[0]<18.5) outputBMI[0].textContent = "Your BMI indicates that you are underweight.";
            if (outputBMI[0]>=18.5 && outputBMI[0]<=24.99) document.getElementById("result").value = "Normal";
            if (outputBMI[0]>=25 && outputBMI[0]<=29.99) document.getElementById("result").value = "Obese";
            if (outputBMI[0]>30) document.getElementById("result").value = "Overweight";
            }
        };

        //add js code here to handler click event, and make the height input box be focused after the page is opened in web browser
        document.getElementById('calculate').onclick = processEntries;

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

如果需要，这也是我的CSS代码：

article, aside, figure, footer, header, main, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: url('BMI.jpg') center center fixed;

    margin: 0 auto;
    width: 600px;
    border: 3px solid blue;

}
html {
    background-color: #eee;
}
main {
    padding: 0 2em 1em;
    margin: 2em;
    background-color: white;

}
h2 {
    color: blue;
}
label {
    float: left;
    width: 12em;
    text-align: right;
    padding-bottom: .5em;
}

div {
    width: 24em;
    text-align: left;
    padding-bottom: .5em;   
    font-size: 20px;

}

input {
    margin-left: 1em;
    margin-bottom: .5em;

}
input.error {
    background-color: #FFFF00;
    border: 2px solid #fe9772;
}

Answer 1

在您的代码上有很多工作要做。但最重要的是，您需要记住，classSelector（在您的情况下为结果）始终返回数组。如果您使用唯一的dom，请切换到ID

var processEntries = function() {   

             var heightInputBox = document.getElementById("boxHeight");
             var weightInputBox = document.getElementById("boxWeight");
             var resultElm = document.getElementById("result");

             resultElm.textContent = "";
             heightInputBox.className = "";
             weightInputBox.className = "";

             console.log(heightInputBox.getAttribute('class'));

            ///get user input from input box "boxHeight" by using value property, 
            //which return user input as a string               
            //step1.1:get height input and convert height to a number
            var height = heightInputBox.value;
            height = parseFloat(height);

            //step1.2:get weight input and convert weight to a number
            var weight = weightInputBox.value;
            weight = parseFloat(weight);

            var valid = true;           
            if (isNaN(height)||height <0) {
                alert("Invalid input for height, enter a non-negative number.");
                heightInputBox.className = "error";
                valid = false;
            } 

            if (isNaN(weight)||weight <0) {
                alert("Invalid input for weight, enter a non-negative number.");
                weightInputBox.setAttribute('class', "error");
                valid = false;
            }
            var bmi = 703 * weight / (height** 2)
            if (valid)          //calculate BMI
            {
                resultElm.textContent  ="Your BMI is: " + (bmi).toFixed(1);
                if (bmi<18.5) resultElm.textContent += " Your BMI indicates that you are underweight.";
                if (bmi>=18.5 && bmi<=25) resultElm.textContent += " Your BMI indicates that you are Normal.";
                if (bmi>=25 && bmi<=30)resultElm.textContent += " Your BMI indicates that you are Obese.";
                if (bmi>30) resultElm.textContent += " Your BMI indicates that you are Overweight";
            }
        };

        //add js code here to handler click event, and make the height input box be focused after the page is opened in web browser
        document.getElementById('calculate').onclick = processEntries;

article, aside, figure, footer, header, main, nav, section {
    display: block;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: url('BMI.jpg') center center fixed;

    margin: 0 auto;
    width: 600px;
    border: 3px solid blue;

}
html {
    background-color: #eee;
}
main {
    padding: 0 2em 1em;
    margin: 2em;
    background-color: white;

}
h2 {
    color: blue;
}
label {
    float: left;
    width: 12em;
    text-align: right;
    padding-bottom: .5em;
}

div {
    width: 24em;
    text-align: left;
    padding-bottom: .5em;   
    font-size: 20px;

}

input {
    margin-left: 1em;
    margin-bottom: .5em;

}
input.error {
    background-color: #FFFF00;
    border: 2px solid #fe9772;
    }

<main>
        <h2>Body Mass Index Calculation Application</h2>

        <label for="boxHeight">Enter height in inches:</label>
        <input type='text' id='boxHeight'/><br>

        <label for="boxWeight">Enter weight in pounds:</label>
        <input type='text' id='boxWeight'/><br>

        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate">

        <div id="result"></div>

    </main>

Answer 2

我知道这个问题已经有了一个很好而有效的答案。

以下仅仅是我玩弄小提琴，试图缩短它并使它更“敏感”的结果。

我卸下了计算按钮，现在使用eval()来容忍地转换和计算输入字段的值。

const qs=s=>document.querySelector(s);
evl=s=>{var v='', el=qs(s);
 try{v=eval(el.value)||''} catch(er){v=''}
 el.nextElementSibling.innerText=(v?'='+v.toFixed(2):v);
 return v
}
var scale=[[18.5,"underweight"],
 [25,"normal"],[30,"obese"],
 [31,"seriously overweight"]];
 
qs("body").addEventListener("keyup",ev=>{if(ev.target.type!='text') return;
 var txt, height=evl("#boxHeight"), weight=evl("#boxWeight");
 if (height>0 && weight>0){
   BMI=703*weight/(height*height);
   scale.every(sc=>(txt=sc[1],BMI>sc[0])); 
   txt='Your BMI of '+BMI.toFixed(1)+" indicates<br>that you are "+txt+".";
 } else txt='';
 qs("#result").innerHTML=txt
 
});

body {
    font-family: Arial, Helvetica, sans-serif;
    background: url('BMI.jpg') center center fixed;

    margin: 0 auto;
    width: 600px;
    border: 3px solid blue;

}
html {
    background-color: #eee;
}
main {
    padding: 0 2em 1em;
    margin: 2em;
    background-color: white;
}
h2 {
    color: blue;
}
label {
    float: left;
    width: 12em;
    text-align: right;
    padding-bottom: .5em;
}
div {
    width: 24em;
    text-align: left;
    padding-bottom: .5em;   
    font-size: 20px;
}

input {
    margin-left: 1em;
    margin-bottom: .5em;

}
span {margin-left:20px;
      font-size:1.5ex;}

<main>
        <h2>Body Mass Index Calculation Application</h2>

        <label for="boxHeight">Enter height in inches:</label>
        <input type='text' id='boxHeight' placeholder="value or formula"/><span id="one"></span><br>

        <label for="boxWeight">Enter weight in pounds:</label>
        <input type='text' id='boxWeight' placeholder="value or formula"/><span id="two"></span><br>
        <div id="result"></div>
    </main>

Answer 3

一段时间后，我多次编辑了代码，这是我认为值得分享的版本。我知道仍然需要做很多修改-但这是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>BMI Calculation</title>
    <link rel="stylesheet" href="bmi.css">

</head>
<body>
    <main>
        <h2>Body Mass Index Calculation Application</h2>

        <label for="boxHeight">Enter height in inches:</label>
        <input type='text' id='boxHeight'/><br>

        <label for="boxWeight">Enter weight in pounds:</label>
        <input type='text' id='boxWeight'/><br>

        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate">

        <div class="results"></div>

    </main>     
    <script>
        var processEntries = function() {   

             var heightInputBox = document.getElementById("boxHeight");
             var weightInputBox = document.getElementById("boxWeight");
             var outputBMI = document.querySelectorAll("div.results");

             outputBMI[0].textContent = "";
             heightInputBox.className = "";
             weightInputBox.className = "";

             console.log(heightInputBox.getAttribute('class'));

            var height = heightInputBox.value;
            height = parseFloat(height);

            var weight = weightInputBox.value;
            weight = parseFloat(weight);

            var valid = true;           
            if (isNaN(height)||height <0 || height != parseInt(height, 10)) {
                outputBMI[0].textContent +=" Invalid input for height, enter a non-negative number.";
                heightInputBox.className = "error";
                valid = false;
            } 

            if (isNaN(weight)||weight <0 || weight != parseInt(weight, 10)) {
                outputBMI[0].textContent +=" Invalid input for weight, enter a non-negative number.";
                weightInputBox.setAttribute('class', "error");
                valid = false;
            }

            if (valid)
            {
                outputBMI[0].textContent  ="Your BMI is: " + (703 * weight / (height*height)).toFixed(1);

                //This is just for my trial and learning process. =)
                var bmi = (703 * weight / (height*height)).toFixed(1);
                if (bmi<18.5) outputBMI[0].textContent += " Your BMI indicates that you are underweight.";
                if (bmi>=18.5 && bmi<=25) outputBMI[0].textContent += "Your BMI indicates that you are normal.";
                if (bmi>25 && bmi<=30) outputBMI[0].textContent += "Your BMI indicates that you are obsese.";
                if (bmi>30) outputBMI[0].textContent += "Your BMI indicates that you are overweight.";
            }
        };

       //handler button click event 
        document.getElementById('calculate').onclick = processEntries;

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

BMI计算程序

3 个答案: