javascript - BMI计算程序

问题描述

我创建了一个计算 BMI 的应用程序。基本上，这是我希望应用程序工作的方式，并在下面写到：

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

我遇到了2个问题。

我可以让程序显示 BMI 结果，但目前我不知道如何编写程序来显示用户是否体重过轻、正常、肥胖或超重。如果 BMI < 18.5 则体重过轻，BMI >= 18.5 且 <=24.99 则正常，BMI > 25 且 <=29.99 则肥胖，BMI > 30 则超重。
我想将错误（告诉用户输入正值，而不是缺失值或负值）显示为“计算 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;
}

标签： javascripthtmldom

解决方案

您的代码有很多需要修改的地方。但最重要的是，您需要记住 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>

javascript - BMI计算程序

问题描述

解决方案

推荐阅读