NAN, as a result of a [closed]

Navigation
0

I have the following very simple javascript code, however, I would like to know why the return result is NAN? HTML: 

<label for="pretensaoMes">Pretensão ao Mês</label>
<input type="text" id="pretensaoMes">
<label for="diasPorMes">Dias por Mês</label>
<input type="text" id="diasPorMes">
<label for="horasPorDia">Horas por Dia</label>
<input type="text" id="horasPorDia">

<button id="btn">Clique</button>
<p id="result">Nenhum resultado</p>

And the JS: 

var btn = document.getElementById("btn");
var PM = document.getElementById("pretensaoMes");
var PMINT = PM.value;
var pm = parseInt().PMINT;
var DM = document.getElementById("diasPorMes");
var DMINT = DM.value;
var dm = parseInt().DMINT;
var HD = document.getElementById("horasPorDia");
var HDINT = HD.value;
var hd = parseInt().HDINT;
var horaTrabalho = pm + dm + hd;
var tanto = horaTrabalho;

var result = document.getElementById("result");

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

    result.innerHTML = tanto;

})
    
asked by anonymous 02.12.2017 / 21:37

2 answers

1

Obtaining input values is done before the user even enters them. You should only get them when the button is clicked, ie in the click event. This refers to .value and not specifically getElementById , assuming that this JS only runs after the elements have all been loaded.

The parseInt must be converted to integer as a parameter: 

var dm = parseInt(DMINT); //em vez de var dm = parseInt().DMINT;

You can rearrange it like this: 

var btn = document.getElementById("btn");
var PM = document.getElementById("pretensaoMes");
var DM = document.getElementById("diasPorMes");
var HD = document.getElementById("horasPorDia");
var result = document.getElementById("result");

btn.addEventListener("click", function(){
    var PMINT = PM.value;
    var pm = parseInt(PMINT);
    var DMINT = DM.value;
    var dm = parseInt(DMINT);
    var HDINT = HD.value;
    var hd = parseInt(HDINT);
    var horaTrabalho = pm + dm + hd;
    var tanto = horaTrabalho;
    result.innerHTML = tanto;
});
<label for="pretensaoMes">Pretensão ao Mês</label>
<input type="text" id="pretensaoMes">
<label for="diasPorMes">Dias por Mês</label>
<input type="text" id="diasPorMes">
<label for="horasPorDia">Horas por Dia</label>
<input type="text" id="horasPorDia">

<button id="btn">Clique</button>
<p id="result">Nenhum resultado</p>

I suggest, however, to simplify by searching for .value and converting parseInt to the same statement. Even the variable horaTrabalho is not necessary since it immediately passes its value to the variable tanto 

var btn = document.getElementById("btn");
var PM = document.getElementById("pretensaoMes");
var DM = document.getElementById("diasPorMes");
var HD = document.getElementById("horasPorDia");
var result = document.getElementById("result");

btn.addEventListener("click", function(){
    var pm = parseInt(PM.value);
    var dm = parseInt(DM.value);
    var hd = parseInt(HD.value);

    var tanto = pm + dm + hd;
    result.innerHTML = tanto;
});
<label for="pretensaoMes">Pretensão ao Mês</label>
<input type="text" id="pretensaoMes">
<label for="diasPorMes">Dias por Mês</label>
<input type="text" id="diasPorMes">
<label for="horasPorDia">Horas por Dia</label>
<input type="text" id="horasPorDia">

<button id="btn">Clique</button>
<p id="result">Nenhum resultado</p>
    
02.12.2017 / 21:47
2

This: 

var pm = parseInt().PMINT;

this 

var dm = parseInt().DMINT;

And this 

var dm = parseInt().HDINT;

Just do not make sense, .PMINT , .DMINT and .HDINT are not the same as PMINT , DMINT and HDINT .

When trying to access the return with point . of parseInt which is a NaN property, you will try to access internal properties of it, but it does not make much sense.

The correct one should probably be: 

var result = document.getElementById("result");
var btn = document.getElementById("btn");

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

    var PM = document.getElementById("pretensaoMes");
    var PMINT = PM.value;
    var pm = parseInt(PMINT);
    var DM = document.getElementById("diasPorMes");
    var DMINT = DM.value;
    var dm = parseInt(DMINT);
    var HD = document.getElementById("horasPorDia");
    var HDINT = HD.value;
    var hd = parseInt(HDINT);
    var horaTrabalho = pm + dm + hd;
    var tanto = horaTrabalho;

    result.innerHTML = tanto;

});
<label for="pretensaoMes">Pretensão ao Mês</label>
<input type="text" id="pretensaoMes">
<label for="diasPorMes">Dias por Mês</label>
<input type="text" id="diasPorMes">
<label for="horasPorDia">Horas por Dia</label>
<input type="text" id="horasPorDia">

<button id="btn">Clique</button>
<p id="result">Nenhum resultado</p>
    
02.12.2017 / 21:47
Simulate click on Jq or JS Txt displays duplicate information