Question

您好我试图创建简单的JS BMI计算器，我有一些问题。我有点卡住，不知道我做错了什么。这是代码我做错了什么我不明白.....

function calculateBmi() {
    var weight = document.bmiForm.weight.value;
    var height = document.bmiForm.height.value;
    
    if (weight > 0 && height > 0) {
        
        var finalBmi = weight / (height / 100 * height / 100);
        document.getElementById("displayResult").p[0].innerHTML = "Your BMI is " + finalBmi;
        var displayResult = document.getElementById("displayResult");
        displayResult.className = "open";
        
        if (finalBmi < 18.5) {
            document.getElementById("displayResult").p[1].innerHTML = "You are too slim. You should see your doctor."
        }
        else if (finalBmi >= 18.5 && finalBmi <= 25) {
            document.getElementById("displayResult").p[1].innerHTML = "You are in the correct weight range."
        }
        else {
            document.getElementById("displayResult").p[1].innerHTML = "You are overweight. You should see your doctor."
        }
    }
    else {
        alert("Enter data in the fields!");
    }
}

body{
    margin: 0;
    padding: 0;
    
    background-color: #a0a0a0;
}


#bmiForm {
    margin: 10px auto 10px auto;
    text-align: center;
    
    font-family: Georgia;
    font-size: 16px;
    
}

input[type="text"]{
    background-color: #e5e5e5;
    border-radius: 5px 5px 0 0;
    height: 30px;
    width: 150px;
    padding-left: 6px;
    margin: 10px;
}

input[type="button"]{
    
     background:none;
     border:none;
    
    height: 50px;
    width: 100px;
    background-color: #18663a;
    border-radius: 5px 5px 5px 5px;
    
    position: relative;
    right: 30px;
    
    color: #fff;
}

input[type="button"]:active{
    position: relative;
    top: 3px;
}

button{
    background:none;
    border:none;
    background-color: #968076;
    
    height: 50px;
    width: 100px;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    position: relative;
    left: 30px;
}

button:active{
    position: relative;
    top: 3px;
}

#displayResult{
    
    background-color: #5378b5;
    height: 180px;
    width: 360px;
    
    margin: 30px auto 0px auto;
    padding: 15px;
    
    font-family: Georgia;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.5em;
    color: #fff;
    opacity: 0;
    overflow: hidden;
    
    -webkit-box-shadow: 0px 5px 25px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 25px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 25px 1px rgba(0,0,0,0.75);
}

#displayResult.open{
    opacity: 1;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BMI Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body>
    
    <form id="bmiForm">
    Enter your weight in kg <input type="text" name="weight"> <br>
    Enter your height in cm <input type="text" name="height"> <br>
    <input type="button" value="Calculate BMI" onClick="calculateBmi()">
    <button type="reset">Reset</button>
    </form>
    
    <div id="displayResult">
        <p></p>
        <p></p>
    </div>
    
    <script src="main.js"></script>
</body>

</html>

Answer 1

首先你不需要在代码笔中使用html，head和body，所以我删除了它们
你试图以错误的方式获取值，所以我将id添加到了输入中重量和高度，我使用js代码中的getElementById
为了设置结果，我为每个p元素添加了id，在js代码中我使用了ID并设置了计算值

function calculateBmi() {
    var weight = document.getElementById("weight").value;
    var height = document.getElementById("height").value;
    
    if (weight > 0 && height > 0) {
        
        var finalBmi = weight / (height / 100 * height / 100);
        document.getElementById("first").innerHTML = "Your BMI is " + finalBmi;
        var displayResult = document.getElementById("displayResult");
        displayResult.className = "open";
        
        if (finalBmi < 18.5) {
            document.getElementById("second").innerHTML = "You are too slim. You should see your doctor."
        }
        else if (finalBmi >= 18.5 && finalBmi <= 25) {
            document.getElementById("second").innerHTML = "You are in the correct weight range."
        }
        else {
            document.getElementById("second").innerHTML = "You are overweight. You should see your doctor."
        }
    }
    else {
        alert("Enter data in the fields!");
    }
}

body{
    margin: 0;
    padding: 0;
    
    background-color: #a0a0a0;
}


#bmiForm {
    margin: 10px auto 10px auto;
    text-align: center;
    
    font-family: Georgia;
    font-size: 16px;
    
}

input[type="text"]{
    background-color: #e5e5e5;
    border-radius: 5px 5px 0 0;
    height: 30px;
    width: 150px;
    padding-left: 6px;
    margin: 10px;
}

input[type="button"]{
    
     background:none;
     border:none;
    
    height: 50px;
    width: 100px;
    background-color: #18663a;
    border-radius: 5px 5px 5px 5px;
    
    position: relative;
    right: 30px;
    
    color: #fff;
}

input[type="button"]:active{
    position: relative;
    top: 3px;
}

button{
    background:none;
    border:none;
    background-color: #968076;
    
    height: 50px;
    width: 100px;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    position: relative;
    left: 30px;
}

button:active{
    position: relative;
    top: 3px;
}

#displayResult{
    
    background-color: #5378b5;
    height: 180px;
    width: 360px;
    
    margin: 30px auto 0px auto;
    padding: 15px;
    
    font-family: Georgia;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.5em;
    color: #fff;
    opacity: 0;
    overflow: hidden;
    
    -webkit-box-shadow: 0px 5px 25px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 25px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 25px 1px rgba(0,0,0,0.75);
}

#displayResult.open{
    opacity: 1;
}

 <form id="bmiForm">
    Enter your weight in kg <input type="text" id="weight" name="weight"> <br>
    Enter your height in cm <input type="text" id="height" name="height"> <br>
    <input type="button" value="Calculate BMI" onClick="calculateBmi()">
    <button type="reset">Reset</button>
    </form>
    
    <div id="displayResult">
        <p id="first"></p>
        <p id="second"></p>
    </div>

简单的bmi计算器代码错误

1 个答案: