function comeco() {
var calcular_imc = document.querySelector("#calcular-imc")
calcular_imc.addEventListener("click", cliquei)
var input_peso = document.querySelector("#input-peso")
var input_altura = document.querySelector("#input-altura")
input_peso = document.addEventListener("input", cliquei)
input_altura = document.addEventListener("input", cliquei)
}
function calculo_imc(peso, altura) {
return peso / (altura * altura)
}
function cliquei() {
var input_peso = document.querySelector("#input-peso")
var input_altura = document.querySelector("#input-altura")
var imc_resultado = document.querySelector("#imc-resultado")
var imc_condicao = document.querySelector("#imc-condicao")
var peso = Number(input_peso.value)
var altura = Number(input_altura.value)
var imc = calculo_imc(peso, altura)
var imc_formatado = imc.toFixed(2)
/*if (imc.toFixed(2) < 18.5){
imc_condicao = console.log ("Peso Abaixo do Normal")
}
else if (imc.toFixed(2) >= 18.5 && imc.toFixed(2) <= 24.9){
imc_condicao = console.log ("Peso Normal")
}
else if (imc.toFixed(2) >= 25 && imc.toFixed(2) <= 29.9){
imc_condicao = console.log ("Sobrepeso")
}
else if (imc.toFixed(2) >= 30 && imc.toFixed(2) <= 34.9){
imc_condicao = console.log ("Obesidade Grau I")
}
else if (imc.toFixed(2) >= 35 && imc.toFixed(2) <= 39.9){
imc_condicao = console.log ("Obesidade Grau II")
}
else if (imc.toFixed(2) >= 40){
imc_condicao = console.log ("Obesidade Graus II ou Mórbida")
}
else{
imc_condicao = "Valor não suportado"
}*/
imc_resultado.textContent = imc_formatado
imc_condicao.textContent = imc_condicao
}
comeco()
#quadro-externo-um {
background-color: lightgray;
padding: 50px;
border-radius: 20px;
}
body {
margin: auto;
padding: 50px;
width: 600px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
}
input {
width: 100px;
padding: 5px;
border-color: black;
border-radius: 5px;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
button {
background-color: lightgray;
padding: 5px;
margin-top: 8px;
border-color: black;
border-radius: 5px;
}
#paragrafo-resultado {
padding: 10px;
}
#paragrafo-condicao {
margin-top: 35px;
}
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Calculo IMC</title>
</head>
<body>
<div id="quadro-externo-um">
<h1>IMC</h1>
<p>
<label for="input-peso">Informe seu peso (Kg):</label>
<input id="input-peso" type="number" value="70" step="0.1" />
</p>
<p>
<label for="input-altura">Informe sua altura (m):</label>
<input id="input-altura" type="number" value="1.70" step="0.01" />
</p>
<p>
<button id="calcular-imc">Calcular IMC</button>
</p>
<p id="paragrafo-resultado">O valor do IMC desses dados é: <strong id="imc-resultado"></strong></p>
</div>
<div id="quadro-externo-dois">
<p id="paragrafo-condicao">Este resultado significa que você está com: <strong id="imc-condicao"></strong></p>
</div>
<script defer src="script/js.js"></script>
</body>
</html>
Note no JavaScript: eu preciso que o document.querySelector
e o textContent
funcionem mesmo com a utilização da estrutura if
, else if
, else
.