1

Tenho o seguinte código javascript muito simples, porém, gostaria de saber pq o resultado de retorno está sendo NAN? O 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>

E o 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;

})
2
  • O JS é executado depois do carregamento dá pagina ? Que seria através do onload do <body> ou sendo colocado no fim do <body>
    – Isac
    2/12/2017 às 20:38
  • Dentro do <body></body>
    – LeAndrade
    2/12/2017 às 20:39

2 Respostas 2

2

O obter dos valores dos inputs está a ser feito antes sequer do usuário os introduzir. Apenas os deve obter quando o botão é clicado ou seja, no evento de click. Isto refere-se ao .value e não especificamente ao getElementById, assumindo que este JS apenas corre após os elementos terem sido todos carregados.

O parseInt tem de levar como parâmetro o valor a converter para inteiro:

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

Pode reorganizar assim:

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>

Sugiro no entanto que simplifique, fazendo a busca do .value e convertendo com o parseInt na mesma instrução. Mesmo a variável horaTrabalho não é necessária uma vez que passa logo de seguida o seu valor para a variável 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>

0
2

Isto:

var pm = parseInt().PMINT;

isto

var dm = parseInt().DMINT;

E isto

var dm = parseInt().HDINT;

Simplesmente não fazem sentido, o .PMINT, .DMINT e .HDINT não são a mesma coisa que PMINT, DMINT e HDINT.

Ao tentar acessar o retorno com ponto . de parseInt que é uma propriedade NaN, você tentará acessar propriedades internas dele, mas não faz muito sentido.

O correto provavelmente deveria ser:

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>

1
  • 1
    Valew man, deu certo aqui, Obrigado!
    – LeAndrade
    2/12/2017 às 20:54

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .