Função está retornando NaN

JavaScript

HTML5

24/06/2019

Pessoal, boa noite, estou estudando JS e tenho dificuldade em criação de elementos HTML pelo JS, então, para praticar, fiz um sistema web todo em JS, desde as div''s até os inputs, está tudo indo muito bem, só que quando eu executo a função ela retorna NaN e não sei o porquê, tem como me ajudar?


PS: Sou bem novato e estou aprendendo, o sistema é bem básico

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Criação de Elementos pelo JS</title>
</head>
<body id="body">

<script>
var bodyElement = document.querySelector(''body#body'')

//Primeira Div
var divElement = document.createElement(''div'')
divElement.setAttribute(''id'', ''app'')

bodyElement.appendChild(divElement)

//Primeiro Input
var input1Element = document.createElement(''input'')
input1Element.setAttribute(''type'', ''number'')
input1Element.setAttribute(''name'', ''numero1'')
input1Element.setAttribute(''id'', ''num1'')

divElement.appendChild(input1Element)

//Segundo Input
var input2Element = document.createElement(''input'')
input2Element.setAttribute(''type'', ''number'')
input2Element.setAttribute(''name'', ''numero2'')
input2Element.setAttribute(''id'', ''num2'')

divElement.appendChild(input2Element)

//Botão Calculo
var buttonElement = document.createElement(''input'')
buttonElement.setAttribute(''type'', ''button'')
buttonElement.setAttribute(''value'', ''Calcular'')
buttonElement.setAttribute(''onclick'', ''somar()'')
buttonElement.setAttribute(''id'', ''botao'')

divElement.appendChild(buttonElement)

//Div Resultado
var divResultElement = document.createElement(''div'')
divResultElement.setAttribute(''id'', ''res'')
var txtResult = document.createTextNode(''Resultado'')

divResultElement.appendChild(txtResult)
divElement.appendChild(divResultElement)

//Função Soma
var num_str = document.querySelector(''div#app input#num1'')
var num2_str = document.querySelector(''div#app input#num2'')
var btn = document.querySelector(''div#app input#botao'')
var res = document.querySelector(''div#app div#res'')

num = Number.parseInt(num_str)
num2 = Number.parseInt(num2_str)

function somar() {
var result = num + num2
res.innerHTML = `O resultado é $`
}

</script>
</body>
</html>
Paulo Sérgio

Paulo Sérgio

Curtidas 0

Melhor post

Bruno Rodrigues

Bruno Rodrigues

25/06/2019

Pessoal, boa noite, estou estudando JS e tenho dificuldade em criação de elementos HTML pelo JS, então, para praticar, fiz um sistema web todo em JS, desde as div''s até os inputs, está tudo indo muito bem, só que quando eu executo a função ela retorna NaN e não sei o porquê, tem como me ajudar?


PS: Sou bem novato e estou aprendendo, o sistema é bem básico

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Criação de Elementos pelo JS</title>
</head>
<body id="body">

<script>
var bodyElement = document.querySelector(''body#body'')

//Primeira Div
var divElement = document.createElement(''div'')
divElement.setAttribute(''id'', ''app'')

bodyElement.appendChild(divElement)

//Primeiro Input
var input1Element = document.createElement(''input'')
input1Element.setAttribute(''type'', ''number'')
input1Element.setAttribute(''name'', ''numero1'')
input1Element.setAttribute(''id'', ''num1'')

divElement.appendChild(input1Element)

//Segundo Input
var input2Element = document.createElement(''input'')
input2Element.setAttribute(''type'', ''number'')
input2Element.setAttribute(''name'', ''numero2'')
input2Element.setAttribute(''id'', ''num2'')

divElement.appendChild(input2Element)

//Botão Calculo
var buttonElement = document.createElement(''input'')
buttonElement.setAttribute(''type'', ''button'')
buttonElement.setAttribute(''value'', ''Calcular'')
buttonElement.setAttribute(''onclick'', ''somar()'')
buttonElement.setAttribute(''id'', ''botao'')

divElement.appendChild(buttonElement)

//Div Resultado
var divResultElement = document.createElement(''div'')
divResultElement.setAttribute(''id'', ''res'')
var txtResult = document.createTextNode(''Resultado'')

divResultElement.appendChild(txtResult)
divElement.appendChild(divResultElement)

//Função Soma
var num_str = document.querySelector(''div#app input#num1'')
var num2_str = document.querySelector(''div#app input#num2'')
var btn = document.querySelector(''div#app input#botao'')
var res = document.querySelector(''div#app div#res'')

num = Number.parseInt(num_str)
num2 = Number.parseInt(num2_str)

function somar() {
var result = num + num2
res.innerHTML = `O resultado é $`
}

</script>
</body>
</html>


Bom dia Paulo, tudo joia? eu também estou inciando meus estudos em JS, eu dei uma olhada no seu código e na hora que copiei ele para minha ideia estava mostrando que todos os campos estão com duas "aspas simples" em vez de uma ou uma aspas duplas "eu acredito que seja algum bug ao copiar e colar"
a forma que encontrei de fazer funcionar foi a seguinte: toda a parte do comentário //Função Soma eu coloquei diretamente dentro da função, pq pelo que percebi ao criar os campos dinamicamente com o JS e deixando fora da função criação das variáveis que pegam os valores dos inputs faz com que essas variáveis sejam preenchidas com uma string vazia "" devido essas variáveis estarem sendo criadas junto com o carregamento da pagina, então o que fiz foi colocar dentro do escopo da função e adicionei o .value ao final do querySelector para pegar o valor desse seletor e colocar dentro da variável, a partir dai seguiu normal teu código, somente no final que faltou completar o templete string você deixou o como `O resultado é $` e o correto seria `O resultado é $`
Eu realmente demorei um pouco pra notar, dei muitos console.log nas variáveis para perceber que elas estavam carregando valores strings vazio ou elementos html inteiros, fiz alguns testes e consegui resolver assim, espero que algum instrutor corrija da melhor o forma para nós e que assim possamos aprender do melhor jeito possível.
Ps: desculpas mas ainda não sei explicar muito bem o que fiz para resolver o problema.

segue meu código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Criação de Elementos pelo JS</title>
</head>
<body id="body">

<script>
var bodyElement = document.querySelector('body#body')

//Primeira Div
var divElement = document.createElement('div')
divElement.setAttribute('id', 'app')

bodyElement.appendChild(divElement)

//Primeiro Input
var input1Element = document.createElement('input')
input1Element.setAttribute('type', 'number')
input1Element.setAttribute('name', 'numero1')
input1Element.setAttribute('id', 'num1')

divElement.appendChild(input1Element)

//Segundo Input
var input2Element = document.createElement('input')
input2Element.setAttribute('type', 'number')
input2Element.setAttribute('name', 'numero2')
input2Element.setAttribute('id', 'num2')

divElement.appendChild(input2Element)

//Botão Calculo
var buttonElement = document.createElement('input')
buttonElement.setAttribute('type', 'button')
buttonElement.setAttribute('value', 'Calcular')
buttonElement.setAttribute('onclick', 'somar()')
buttonElement.setAttribute('id', 'botao')

divElement.appendChild(buttonElement)

//Div Resultado
var divResultElement = document.createElement('div')
divResultElement.setAttribute('id', 'res')
var txtResult = document.createTextNode('Resultado')

divResultElement.appendChild(txtResult)
divElement.appendChild(divResultElement)



function somar() {
//Função Soma
var num_str = document.querySelector('div#app input#num1').value
var num2_str = document.querySelector('div#app input#num2').value
var btn = document.querySelector('div#app input#botao')
var res = document.querySelector('div#app div#res')

var num = Number.parseInt(num_str)
var num2 = Number.parseInt(num2_str)

var result = num + num2
console.log(result)
res.innerHTML = `O resultado é $`
}

</script>
</body>
</html>
GOSTEI 1

Mais Respostas

Bruno Rodrigues

Bruno Rodrigues

24/06/2019

Pessoal, boa noite, estou estudando JS e tenho dificuldade em criação de elementos HTML pelo JS, então, para praticar, fiz um sistema web todo em JS, desde as div''s até os inputs, está tudo indo muito bem, só que quando eu executo a função ela retorna NaN e não sei o porquê, tem como me ajudar?


PS: Sou bem novato e estou aprendendo, o sistema é bem básico

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Criação de Elementos pelo JS</title>
</head>
<body id="body">

<script>
var bodyElement = document.querySelector(''body#body'')

//Primeira Div
var divElement = document.createElement(''div'')
divElement.setAttribute(''id'', ''app'')

bodyElement.appendChild(divElement)

//Primeiro Input
var input1Element = document.createElement(''input'')
input1Element.setAttribute(''type'', ''number'')
input1Element.setAttribute(''name'', ''numero1'')
input1Element.setAttribute(''id'', ''num1'')

divElement.appendChild(input1Element)

//Segundo Input
var input2Element = document.createElement(''input'')
input2Element.setAttribute(''type'', ''number'')
input2Element.setAttribute(''name'', ''numero2'')
input2Element.setAttribute(''id'', ''num2'')

divElement.appendChild(input2Element)

//Botão Calculo
var buttonElement = document.createElement(''input'')
buttonElement.setAttribute(''type'', ''button'')
buttonElement.setAttribute(''value'', ''Calcular'')
buttonElement.setAttribute(''onclick'', ''somar()'')
buttonElement.setAttribute(''id'', ''botao'')

divElement.appendChild(buttonElement)

//Div Resultado
var divResultElement = document.createElement(''div'')
divResultElement.setAttribute(''id'', ''res'')
var txtResult = document.createTextNode(''Resultado'')

divResultElement.appendChild(txtResult)
divElement.appendChild(divResultElement)

//Função Soma
var num_str = document.querySelector(''div#app input#num1'')
var num2_str = document.querySelector(''div#app input#num2'')
var btn = document.querySelector(''div#app input#botao'')
var res = document.querySelector(''div#app div#res'')

num = Number.parseInt(num_str)
num2 = Number.parseInt(num2_str)

function somar() {
var result = num + num2
res.innerHTML = `O resultado é $`
}

</script>
</body>
</html>


Bom dia Paulo, tudo joia? eu também estou inciando meus estudos em JS, eu dei uma olhada no seu código e na hora que copiei ele para minha ideia estava mostrando que todos os campos estão com duas "aspas simples" em vez de uma ou uma aspas duplas "eu acredito que seja algum bug ao copiar e colar"
a forma que encontrei de fazer funcionar foi a seguinte: toda a parte do comentário //Função Soma eu coloquei diretamente dentro da função, pq pelo que percebi ao criar os campos dinamicamente com o JS e deixando fora da função criação das variáveis que pegam os valores dos inputs faz com que essas variáveis sejam preenchidas com uma string vazia "" devido essas variáveis estarem sendo criadas junto com o carregamento da pagina, então o que fiz foi colocar dentro do escopo da função e adicionei o .value ao final do querySelector para pegar o valor desse seletor e colocar dentro da variável, a partir dai seguiu normal teu código, somente no final que faltou completar o templete string você deixou o como `O resultado é $` e o correto seria `O resultado é $`
Eu realmente demorei um pouco pra notar, dei muitos console.log nas variáveis para perceber que elas estavam carregando valores strings vazio ou elementos html inteiros, fiz alguns testes e consegui resolver assim, espero que algum instrutor corrija da melhor o forma para nós e que assim possamos aprender do melhor jeito possível.
Ps: desculpas mas ainda não sei explicar muito bem o que fiz para resolver o problema.

segue meu código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Criação de Elementos pelo JS</title>
</head>
<body id="body">

<script>
var bodyElement = document.querySelector('body#body')

//Primeira Div
var divElement = document.createElement('div')
divElement.setAttribute('id', 'app')

bodyElement.appendChild(divElement)

//Primeiro Input
var input1Element = document.createElement('input')
input1Element.setAttribute('type', 'number')
input1Element.setAttribute('name', 'numero1')
input1Element.setAttribute('id', 'num1')

divElement.appendChild(input1Element)

//Segundo Input
var input2Element = document.createElement('input')
input2Element.setAttribute('type', 'number')
input2Element.setAttribute('name', 'numero2')
input2Element.setAttribute('id', 'num2')

divElement.appendChild(input2Element)

//Botão Calculo
var buttonElement = document.createElement('input')
buttonElement.setAttribute('type', 'button')
buttonElement.setAttribute('value', 'Calcular')
buttonElement.setAttribute('onclick', 'somar()')
buttonElement.setAttribute('id', 'botao')

divElement.appendChild(buttonElement)

//Div Resultado
var divResultElement = document.createElement('div')
divResultElement.setAttribute('id', 'res')
var txtResult = document.createTextNode('Resultado')

divResultElement.appendChild(txtResult)
divElement.appendChild(divResultElement)



function somar() {
//Função Soma
var num_str = document.querySelector('div#app input#num1').value
var num2_str = document.querySelector('div#app input#num2').value
var btn = document.querySelector('div#app input#botao')
var res = document.querySelector('div#app div#res')

var num = Number.parseInt(num_str)
var num2 = Number.parseInt(num2_str)

var result = num + num2
console.log(result)
res.innerHTML = `O resultado é $`
}

</script>
</body>
</html>



Paulo, lembrando que mesmo fazendo funcionar dessa maneira, precisamos fazer algumas validações na função somar, já que se eu passar o valor só de um input ou nenhum e mandar calcular vai retornar um NaN da mesma forma.
GOSTEI 1
POSTAR