Problems with Javascipt calculator

Asked

Viewed 248 times

-2

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

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>

javascript html

  • How about you describe what your code should do? There is one fluffy only, two "Go" buttons and some fields out of the form. Not to mention that in function tabuada you expect a parameter oper, but on the call, on the event click, you don’t pass a value.

  • I think that’s the problem, I can’t pass the parameter oper for the tabulated function

  • 1

    Everything is missing, in fact.

  • I must select the desired operation, click GO! , write the numbers and do the operation;

4 answers

3

Trying to arrange, changing as little as possible the logic would need to include the parseInt to read the values of <input> like numbers, fetch the operation that is not being brought in from html and individualize the calculations within parentheses.

Would then stay so:

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>

Better yet it 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>

  • Gives the same problem as before

  • 1

    @nelson450 What do you mean ? I see the calculations to be made? The calculation was to be made in the first or second GO ? I don’t even understand the need for both of them. Just take away the first GO he’s not doing anything

  • I also saw that looking at the other answer

2

To do javascript operations it is necessary to add parseint(numero) so that javascript does not understand the addition as concatenation

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

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>

  • tested, and when I select an operation, I click GO, it returns Nan

  • obviously, a calculator needs at least 2 values, just fill them in the inputs

  • First I select the operation and then type in the numbers

  • I was talking about the 1st GO, the one that selects the operation

  • What’s that first go for? If you selected an operation, you automatically confirmed it, radio Buttons are also buttons, unless 1º go has another unspecified action

  • Now I saw it, that function was useless!!!

  • Normal kkkk, do not forget to choose one of the answers as best, thus helping the site and users

  • The worst is that the error continues, even using the 'p' function that you did

  • I updated the code maybe that’s it, I’ll get out agr...

  • I haven’t noticed what you’ve changed

Show 5 more comments

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

  • I didn’t have the point of this library, but I can take a look later

  • You’ll like it

0


I was able to solve using Number(), thanks for helping with the resolution.

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>';
    }
}

  • 2

    Hi Nelson. If you came to this answer with the help of the other answers it would be fair to mark the best as accepted.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.