-2
こんにちは私は単純なJS BMIの電卓を作成しようとしています。私はいくつかのissues.Iを持っていると固執していると私は間違っていたか分からない。 ここでは、コードペンには必要ありません。私はそれを得ることはありませんが間違っんでしたどのようなコード.....単純なbmi電卓のコードエラー
http://codepen.io/VaskoTsv/pen/ZLOPZa最初
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>
*を設定します私はいくつかの問題を抱えています。*は適切な問題文ではなく、何も教えてくれません。あなたの助けを借りて、[ask] – charlietfl