Calculator problems Javascipt [closed]

Navigation
-2

When I do an operation, the result is always the same: NaN. What is my error? 

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>
    
asked by anonymous 21.07.2017 / 21:54

4 answers

0

I was able to resolve using Number (), thanks for helping resolve. 

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>';
    }
}
    
22.07.2017 / 00:48
2

To do operations in javascript it is necessary to add parseInt (number) so that javascript does not understand addition as concatenation

Another thing is its show function, it should call the table by passing the example operation parameter ... 

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>
    
21.07.2017 / 22:21
2

Trying to arrange by changing the least possible logic would require adding parseInt to read the values of <input> as numbers, go get the operation that is not being fetched from html and individualize the calculations inside parentheses.

It would look like this: 

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>

Best however would be: 

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>
    
21.07.2017 / 22:32
0

Simplify with 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><inputtype="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>
    
21.07.2017 / 22:49
How to disable a window? [closed] How to change the colors of Notes using javascript according to the result [closed]