-2

Quando eu faço uma operação, o resultado é sempre o mesmo: NaN. Qual meu erro?

function show() {
    var oper = document.querySelector('input[name="oi"]:checked').value;
    return oper;
}
function tabuada(oper) {
    var x = document.getElementsByTagName('input')[5].value;
    var y = document.getElementsByTagName('input')[6].value;
    if (oper == 'add') {
        document.getElementById('resultado').innerHTML = '<h2>' + x+y + '</h2>';
    }
    else if (oper == 'sub') {
        document.getElementById('resultado').innerHTML = '<h2>' + x-y + '</h2>';
    }
    else if (oper == 'div') {
        document.getElementById('resultado').innerHTML = '<h2>' + x/y + '</h2>';
    }
    else {
        document.getElementById('resultado').innerHTML = '<h2>' + x*y + '</h2>';
    }
}
<h3>Selecione a operação desejada:</h3>
<form>
    <input type="radio" name="oi" value="add">
    <label for="add">Adição</label><br>
    <input type="radio" name="oi" value="sub">
    <label for="sub">Subtração</label><br>
    <input type="radio" name="oi" value="mult">
    <label for="mult">Multiplicão</label><br>
    <input type="radio" name="oi" value="div">
    <label for="div">Divisão</label><br>
    <input type="submit" name="oi" onclick="show()" value="GO!">
</form>
<div>
    <h3>Operar: </h3>
    <input type="number" name="oia"><br>
    <input type="number" name="oia">
    <input type="submit" name="oia" value="GO!" onclick="tabuada()">
    <h2>O resultado é: </h2>
    <p id="resultado"></p>
</div>
<script src="teste.js"></script>

4
  • Que tal você descrever o que o seu código deveria fazer? Há um fomulário apenas, dois botões "Go" e alguns campos fora do formulário. Sem contar que na função tabuada você espera um parâmetro oper, mas na chamada, no evento click, você não passa um valor.
    – Woss
    Commented 21/07/2017 às 20:01
  • Acho que é esse o problema, não consigo passar o parâmetro oper para a função tabuada
    – nelson450
    Commented 21/07/2017 às 20:02
  • 1
    Falta tudo, na verdade.
    – Jéf Bueno
    Commented 21/07/2017 às 20:03
  • Eu devo selecionar a operação desejada, clicar GO!, escrever os nºs e fazer a operação;
    – nelson450
    Commented 21/07/2017 às 20:05

4 Respostas 4

3

Tentando arranjar, alterando o minimo possível da logica seria necessário incluir o parseInt para ler os valores dos <input> como números, ir buscar a operação que não está a ser trazida do html e individualizar os cálculos dentro de parêntesis.

Ficaria então assim:

function show() {
    var oper = document.querySelector('input[name="oi"]:checked').value;
    return oper;
}
function tabuada() { //agora sem oper aqui pois ela e chamada do html sem parametros

    //agora x e y são lidos com parseInt para serem numeros
    var x = parseInt(document.getElementsByTagName('input')[5].value);
    var y = parseInt(document.getElementsByTagName('input')[6].value);

    var oper = show(); //faltava ir buscar a operação que estava undefined
    
    if (oper == 'add') {
        //o calculo agora está dentro de parêntesis (x+y) para ser feito primeiro
        document.getElementById('resultado').innerHTML = '<h2>' + (x+y) + '</h2>';
    }
    else if (oper == 'sub') {
        document.getElementById('resultado').innerHTML = '<h2>' + (x-y) + '</h2>';
    }
    else if (oper == 'div') {
        document.getElementById('resultado').innerHTML = '<h2>' + (x/y) + '</h2>';
    }
    else {
        document.getElementById('resultado').innerHTML = '<h2>' + (x*y) + '</h2>';
    }
}
<h3>Selecione a operação desejada:</h3>
<form>
    <input type="radio" name="oi" value="add">
    <label for="add">Adição</label><br>
    <input type="radio" name="oi" value="sub">
    <label for="sub">Subtração</label><br>
    <input type="radio" name="oi" value="mult">
    <label for="mult">Multiplicão</label><br>
    <input type="radio" name="oi" value="div">
    <label for="div">Divisão</label><br>
    <input type="button" name="oi" onclick="show()" value="GO!">
</form>
<div>
    <h3>Operar: </h3>
    <input type="number" name="oia"><br>
    <input type="number" name="oia">
    <input type="submit" name="oia" value="GO!" onclick="tabuada()">
    <h2>O resultado é: </h2>
    <p id="resultado"></p>
</div>
<script src="teste.js"></script>

Melhor no entanto seria:

function tabuada() {
    //as leituras agora todas juntas
    var x = parseInt(document.getElementById('numero1').value); //agora por id
    var y = parseInt(document.getElementById('numero2').value);
    var oper = document.querySelector('input[name="oi"]:checked').value;

    var resultado = 0; //resultado agora numerico
    
    switch(oper){ //calculado com switch
        case 'add': resultado = x + y; break;
        case 'sub': resultado = x - y; break;
        case 'div': resultado = x / y; break;
        case 'mult': resultado = x * y; break;
    }

    //amostragem do resultado agora apenas aqui
    document.getElementById('resultado').innerHTML = '<h2>' + resultado + '</h2>'
    
}
<h3>Selecione a operação desejada:</h3>
<form>
    <input type="radio" name="oi" value="add">
    <label for="add">Adição</label><br>
    <input type="radio" name="oi" value="sub">
    <label for="sub">Subtração</label><br>
    <input type="radio" name="oi" value="mult">
    <label for="mult">Multiplicão</label><br>
    <input type="radio" name="oi" value="div">
    <label for="div">Divisão</label><br>
    <!--Sem o primeiro GO! -->

    <div> <!-- Tudo dentro do form-->
         <h3>Operar: </h3>
         <input type="number" name="oia" id="numero1"><br>
         <input type="number" name="oia" id="numero2">

         <!--Agora button para não submeter o formulário e mudar de página-->
         <input type="button" name="oia" value="GO!" onclick="tabuada()">
         <h2>O resultado é: </h2>
         <p id="resultado"></p>
    </div>
</form>

<script src="teste.js"></script>

3
  • Dá o mesmo problema de antes
    – nelson450
    Commented 21/07/2017 às 20:38
  • 1
    @nelson450 Como assim ? eu vejo os cálculos a serem efetuados? O calculo era para ser feito no primeiro ou no segundo GO ? eu nem percebo a necessidade dos dois. É so retirar o primeiro GO que ele não está a fazer nada
    – Isac
    Commented 21/07/2017 às 20:40
  • Também vi isso olhando a outra resposta
    – nelson450
    Commented 21/07/2017 às 20:45
2

Para fazer operações em javascript é necessário adicionar parseInt(numero) para que o javascript não entenda a adição como concatenação

outra coisa é sua função show, ela deve chamar a tabuada passando o parâmetro da operação exemplo...

function show(){
    var oper = document.querySelector('input[name="oi"]:checked').value;
    tabuada(oper);
}
function p(n){
  return parseInt(n);
}
function tabuada(oper){
    var x = document.getElementsByTagName('input')[5].value;
    var y = document.getElementsByTagName('input')[6].value;
    if (oper == 'add') {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)+p(y)) + '</h2>';
    }
    else if (oper == 'sub') {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)-p(y)) + '</h2>';
    }
    else if (oper == 'div') {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)/p(y)) + '</h2>';
    }
    else {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)*p(y)) + '</h2>';
    }
}
<h3>Selecione a operação desejada:</h3>
    <input type="radio" name="oi" value="add">
    <label for="add">Adição</label><br>
    <input type="radio" name="oi" value="sub">
    <label for="sub">Subtração</label><br>
    <input type="radio" name="oi" value="mult">
    <label for="mult">Multiplicão</label><br>
    <input type="radio" name="oi" value="div">
    <label for="div">Divisão</label><br>
    <input type="submit" name="oi" onclick="show()" value="GO!">
<div>
    <h3>Operar: </h3>
    <input type="number" name="oia"><br>
    <input type="number" name="oia">
    <input type="submit" name="oia" value="GO!" onclick="show()">
    
    <div id="resultado"></div>

10
  • testei, e quando eu seleciono uma operação, clico em GO, ele retorna NaN
    – nelson450
    Commented 21/07/2017 às 20:32
  • obviamente, uma calculadora precisa de no mínimo 2 valores, basta preenche-los nos inputs Commented 21/07/2017 às 20:36
  • Primeiro eu seleciono a operação e depois digito os nº
    – nelson450
    Commented 21/07/2017 às 20:37
  • Eu estava falando do 1º GO, o que seleciona a operação
    – nelson450
    Commented 21/07/2017 às 20:37
  • para que serve esse 1º go? Se você selecionou uma operação, automaticamente você a confirmou, radio buttons também são botões, a não ser que o 1º go tenha outra ação não especificada Commented 21/07/2017 às 20:42
0

Simplifique com JQUERY

var oper;
$("input:radio").on("click", function(){
    oper = $(this).attr("id");
});


function tabuada() {
    var x = parseInt(document.getElementById('m1').value);

    var y = parseInt(document.getElementById('m2').value);

    if (oper == 'add') {
        document.getElementById('resultado').innerHTML = '<h2>' + (x+y) + '</h2>';
    }
    else if (oper == 'sub') {
        document.getElementById('resultado').innerHTML = '<h2>' + (x-y) + '</h2>';
    }
    else if (oper == 'div') {
        document.getElementById('resultado').innerHTML = '<h2>' + (x/y) + '</h2>';
    }
    else {
        document.getElementById('resultado').innerHTML = '<h2>' + (x*y) + '</h2>';
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
	    <input type="radio" name="oi" id="add">
	    <label for="add">Adição</label><br>
	    <input type="radio" name="oi" id="sub">
	    <label for="sub">Subtração</label><br>
	    <input type="radio" name="oi" id="mult">
	    <label for="mult">Multiplicão</label><br>
	    <input type="radio" name="oi" id="div">
	    <label for="div">Divisão</label><br>
	</form>
	<div>
	    <h3>Operar: </h3>
	    <input type="number" name="oia" id="m1"><br>
	    <input type="number" name="oia" id="m2">
	    <input type="submit" name="oia" value="GO!" onclick="tabuada()">
	    <h2>O resultado é: </h2>
	    <p id="resultado"></p>
	</div>

2
  • Não tinha o objetivo de essa biblioteca, mas posso dar uma olhada depois
    – nelson450
    Commented 21/07/2017 às 20:54
  • Você vai gostar
    – user60252
    Commented 21/07/2017 às 21:32
0

Consegui resolver usando Number(), obrigado por terem ajudado na resolução.

function p(n) {
    return Number(n);
}
function tabuada() {
    var oper = document.querySelector('input[name="oi"]:checked').value;
    var x = document.getElementById('n1').value;
    var y = document.getElementById('n2').value;
    if (oper == 'add') {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)+p(y))  + '</h2>';
    }
    else if (oper == 'sub') {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)-p(y))  + '</h2>';
    }
    else if (oper == 'div') {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)/p(y))  + '</h2>';
    }
    else {
        document.getElementById('resultado').innerHTML = '<h2>' + (p(x)*p(y))  + '</h2>';
    }
}

1
  • 2
    Oi Nelson. Se chegaste a esta resposta com ajuda das outras respostas seria justo marcares a melhor como aceite.
    – Sergio
    Commented 22/07/2017 às 9:25

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