前提
ここに質問の内容を詳しく書いてください。
（例）
javascriptで簡単なBMI計算機を作っています。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
javascriptでBMI計算機を作りかけてるのですが、
正しく動作しない。
発生している問題・エラーメッセージ
①weightとheightは数字入力できるが、正しく計算表示されない。
② 「CLEAR」ボタンも効かない。
エラーメッセージ
### 該当のソースコード 【index.html】 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF=8"> l <meta name="viewport" content="width=device-width, initial-scale=1,0"> <link rel="stylesheet" href="style.css"> <title>BMI Caluculator with Javascript</title> </head> <body onload="carregar()"> <main class="container"> <h1>BMI Caluculator</h1> <p>Calicule seu indice Massa Corprea</p> <div class="dados"> <label for="weight">Weight</label> <input type="number" name="weight" id="weight"> <label for="height">Height</label> <input type="number" name="height" id="height"> <button class="botao" onclick="calculate()">calculate</button> </div> <div class="res" id="res"></div> <button class="clear" style="display: block; margin: auto; width: 120px; height: 40px; color: #fff; background: transparent; border: 1px solid #fff; text-transform: uppercase; font-size: 16px;" onclick="clear()">clear</button> </main> <script src="imc.js"></script> </body> </html>
【style.css】
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0.700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
- {
font-family: sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
body {
background-image: url(tokyo.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
height: 100vh;
display: flex;
color: #fff;
}
.container {
align-items: center;
margin: auto;
padding: 30px;
background: rgba(255,255,255,0.181);
width: 700px;
height: 400px;
border: 2px solid rgba(255,255,255,0.185);
box-shadow: 0 50px 30px rgba(0, 0, 0, 0.402);
backdrop-filter: blur(13.5px);
}
h1 {
font-weight: 500;
font-size: 36px;
text-align: center;
}
p {
font-weight: 200;
font-size: 20px;
text-align: center;
margin: 0 0 30px;
}
.resultado {
font-size: 24px;
color: #fff;
text-align: center;
margin: 0;
padding: 5px 20px;
}
.res {
margin: 27px;
height: 100px;
background-color: rgba(255, 255, 255, 0.233);
}
label {
font-size: 24px;
}
input {
color: #fff;
width: 100px;
height: 50px;
font-size: 24px;
text-align: center;
border: 1px solid #fff;
margin-right: 20px;
background-color: rgba(255, 255, 255, 0.246);
}
.botao {
float: right;
margin-right: 30px;
text-transform: uppercase;
width: 150px;
height: 50px;
font-size: 16px;
background: transparent;
border: 1px solid #fff;
color: #fff;
.dados {
text-align: center;
}
/* .clear {
display: block;
margin: auto;
width: 120px;
height: 40px;
color: #fff;
background: transparent;
border: 1px solid #fff;
text-transform: uppercase;
font-size: 16px;
} */
【imc.js】
function carregar() {
inicio = document.querySelector("input#weight").focus();
}
function calculate() {
let weight = Number(document.querySelector("input#weight").value);
let height = Number(document.querySelector("input#height").value);
let imc = weight / height ** 2;
let message = "";
let res = document.querySelector("div#res");
if (imc < 18.5) { message = "Abaixo do peso"; } else if (imc <= 24.9) { message = "Peso normal"; } else if (imc <= 29.9) { message = "sobrepeso"; } else if (imc <= 34.9) { message = "Obesidade grau 1"; } else if (imc <= 39.9) { message = "Obesidade grau 2"; } else { message = "Obesidade grau 3"; } res.innerHTML = '<p class="resultado">Seu IMC e <b>${imc.toFixed(2).replace(".",",")}</b>.<p class="resultado">Message: <b>${message}</b>';
}
function clear() {
document.querySelector("input#weight").value = "";
document.querySelector("input#height").value = "";
document.querySelector("div#res").innerHTML = "";
carregar();
}
試したこと
①タイプミス 確認
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
それなりのBMI計算機の形はできてるのですが、
①weight値とheight値は入力できますが
正常に計算結果表示できてない。
②それら入力値を消す「CLEAR」ボタンも効かない。
どこが誤ってるのかかなり時間を費やしましたがわかりません。
お詳しい方、ご指摘よろしくお願いいたします。
0 コメント