-1
Well, I’m doing a project to calculate IMC, with html, css (bootstrap) and javascript.
The problem is that I can’t access the values that users type in the input, whenever I give an "Alert" appears all blank, or Nan when I try to pass . value
My goal is to access the numerical value of the two input to be able to calculate the BMI.
/* As constantes */
const parsepeso = document.getElementById("peso");
const parsealtura = document.getElementById("altura");
const pegarBotao = document.getElementById("botao");
/* As variáveis */
var pegarPeso = parsepeso.value;
var pegarAltura = parsealtura.value;
/* Função principal que fará o código */
function main() {
pegarBotao.addEventListener("click", function () {
alert(pegarPeso);
});
}
main();
@import url('https://fonts.googleapis.com/css?family=Asap:400,600');
@import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou');
@import url('https://fonts.googleapis.com/css?family=Coiny');
.corpo{
background-color: #5eeaa9;
}
#telaprincipal{
background-color: #95afc0;
width: 50%;
height: 650px;
margin-left: 25%;
margin-top: 2%;
border-radius: 3%;
border-width: 3px;
border-style: solid;
border-color: greenyellow;
border-radius: 15px;
}
#telaprincipal input{
padding: 20px;
font-family: Asap, sans-serif;
}
#telaprincipal label{
padding: 5px;
margin-top: 60px;
font-family: 'ZCOOL QingKe HuangYou', cursive;
font-size: 32px;
}
h1{
text-align: center;
font-family: 'Coiny', cursive;
color: whitesmoke;
padding-top: 23px;
}
#botao{
margin-left: 305px;
margin-top: 90px;
font-family: Asap, sans-serif;
}
#logo h2{
margin-left: 290px;
margin-top: -15px;
margin-bottom: 85px;
color: white;
}
#logo{
border-width: 3px;
border-style: solid;
border-color: white;
border-radius: 15px;
}
#logo h3{
margin-left: 320px;
margin-top: -30px;
margin-bottom: 0px;
color: white;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IMC Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap.min.css" />
</head>
<body class="corpo">
<div id="telaprincipal">
<div id="logo">
<h1>Imc Calculator</h1>
<h2>Seu IMC é:</h2>
<h3 id="result">doodgk</h3>
</div>
<label>Digite o seu peso</label>
<input class="form-control" type="number" name="peso" id="peso" placeholder="Peso (kg)">
<label>Digite a sua altura</label>
<input class="form-control" type="number" name="altura" id="altura" placeholder="Altura (cm)">
<button id="botao" class="btn btn-success">Calcular</button>
</div>
</body>
<script src="main.js"></script>
</html>
... the input value will be an empty string ... The value of the element ? or the value of
pegarPeso
?– NoobSaibot
@Noobsaibot the
document.getElementById("peso").value
will be empty because the user has not entered any value yet. So both– Costamilam