NAN as a result of a function

Question

I have the following very simple javascript code, however, I would like to know pq the return result is being 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;

})

Answer 1

This:

var pm = parseInt().PMINT;

this

var dm = parseInt().DMINT;

And this

var dm = parseInt().HDINT;

They just don’t make sense, the .PMINT, .DMINT and .HDINT are not the same thing 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 doesn’t make much sense.

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

Answer 2

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

The parseInt must take as parameter the value to convert to integer:

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

You can rearrange 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>

However, I suggest that you simplify the search by .value and converting with the parseInt in the same instruction. 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>