Bom dia, pessoal! Estou iniciando os estudos em javascript, porém não sei como integrar o script no HTML.
O exercício é realizar uma calculadora de IMC. Fiz as condições no Javascript, coloquei os campos de altura e peso no HTML, porém eu não consigo pegar as variáveis que são preenchidas no HTML, rodar o script e retornar a resposta (apenas do valor do IMC).
Como eu posso puxar as variáveis do html para o meu script?
HTML
<!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">
<title>Calculadora de IMC</title>
</head>
<body>
<header>
</header>
<main>
Altura:<input type="number" name="altura" id="altura"> m
Peso:<input type="number" name="peso" id="peso"> kg
<input type="button" value="Calcular IMC" id="calc" onclick="calcular()">
IMC:<input type="number" name="imc" id="imc">
<script src="main.js">
</script>
</main>
<footer>
</footer>
</body>
</html>JS
function calcular() {
var altura = window.document.getElementById("altura")
var peso = window.document.getElementById("peso")
console.log("Calculadora de IMC \n");
console.log(`Altura: ${altura} m`);
console.log(`peso: ${peso} kg \n`);
var resultado = (peso / (altura * altura)).toFixed(2)
if(resultado < 18){
console.log(`IMC: ${resultado}`);
console.log("Classificação: Magreza");
console.log("Obesidade grau 0 \n");
}else if(resultado >= 18.5 && resultado <= 24.9){
console.log(`IMC: ${resultado}`);
console.log("Classificação: Normal");
console.log("Obesidade grau 0 \n");
}else if(resultado >= 25.0 && resultado <= 29.9){
console.log(`IMC: ${resultado}`);
console.log("Classificação: Sobrepeso");
console.log("Obesidade grau 1 \n");
}else if(resultado >= 30.0 && resultado <= 39.9){
console.log(`IMC: ${resultado}`);
console.log("Classificação: Obesidade");
console.log("Obesidade grau 2 \n");
}else if(resultado >= 40.0){
console.log(`IMC: ${resultado}`);
console.log("Classificação: Obesidade grave");
console.log("Obesidade grau 3 \n");
}
}