I can not access the value

Well, I'm doing a project to calculate BMI, with HTML, CSS (bootstrap) and javascript.

The problem is that I can not access the values ​​that users type in the entry, every time I give an "alert", everything is empty, or NaN when I try to pass .value

My goal is to access the numerical value of the two inputs to calculate the BMI.

/ * The constants * /



const parsepeso = document.getElementById ("weight");
const parsealtura = document.getElementById ("height");
const catchBotao = document.getElementById ("button");

/ * The variables * /

var pastePeso = parsepeso.value;
var getHeight = parseal.value;





/ * Main function that will create the code * /





function main () {



getBotao.addEventListener ("click", function () {

alert;






});




}


main ();
@import url (https: //fonts.googleapis.com/css? family = Asap: 400,600 & # 39;)
@import url (https: //fonts.googleapis.com/css? family = ZCOOL + QingKe + HuangYou & # 39;);
@import url (https: //fonts.googleapis.com/css? family = Coiny & # 39;)


.corpo {
background color: # 5eeaa9;
}


#telaprincipal {
background color: # 95afc0;
width: 50%;
height: 650px;
left margin: 25%;
upper margin: 2%;
border radius: 3%;
width of the border: 3px;
border style: solid;
border color: yellow green;
border-radius: 15px;
}

#telaprincipal input {
padding: 20px;
font family: Asap, sans-serif;
}

#telaprincipal label {
upholstery: 5px;
top margin: 60px;
font family: "QingKe HuangYou ZCOOL", cursive;
font size: 32px;


}

h1 {
text-align: center;
font family: "Coiny", cursive;
color: white smoke;
padding at the top: 23px;

}

#botao {
left margin: 305px;
top margin: 90px;
font family: Asap, sans-serif;
}

#logo h2 {
left margin: 290px;
top margin: -15px;
lower margin: 85px;
White colour;
}

#logo {
width of the border: 3px;
border style: solid;
border color: white;
border-radius: 15px;
}

#logo h3 {
left margin: 320px;
top margin: -30px;
lower margin: 0px;
White colour;
display: none;
}




    
    
    BMI Calculator