I can’t access the value

Question

I can’t access the value

Asked 5 years, 10 months ago

Viewed 45 times

-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>

3 answers

2

You are trying to get a value that is not set yet, its variables must be set as soon as the user clicks the button:

/* As variáveis (Por enquanto o usuário não definiu os valores ainda) */
 var pegarPeso = null, pegarAltura = null;


/* Função principal que fará o código */
function main() {

    pegarBotao.addEventListener("click", function () {
        //Agora sim...
        pegarPeso = parsepeso.value;
        pegarAltura = parsealtura.value;
        alert(pegarPeso);
    });
}

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Renato Guedes • 76 points · Answer 1 · 2019-02-24T23:04:39+00:00

function main() {
    pegarBotao.addEventListener("click", function () {
          alert(parsepeso.value / Math.pow(parsealtura.value,2));
    });
}

or if you want to create the variables

var pegarPeso;
var pegarAltura;

function main() {
    pegarBotao.addEventListener("click", function () {
      pegarPeso = parsepeso.value;
      pegarAltura= parsealtura.value;
      alert(pegarPeso  / Math.pow(pegarAltura,2));
    });
}

by Costamilam • **9,556** points · Answer 2 · 2019-02-24T23:07:17+00:00

What happens is that when you create the variable pegarPeso the input value will be an empty string '', you do not need to create this variable, only the constant with the reference to the HTML element, when you need it takes the property value of the constant

/* 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 () {
        //Aqui os valores estarão em branco
        console.log(pegarPeso);
        console.log(pegarAltura);

        //Mas se pegar a propriedade value da constante, ai sim terá o que deseja
        console.log(parsepeso.value);
        console.log(parsealtura.value);
    });
}

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>

    <script src="main.js"></script>
</body>
</html>