Calculator with JavaScript validation (I can not find the error)

Question

Calculator with JavaScript validation (I can not find the error)

Navigation

#1 by (3 votes)

1

Calculator

    <style type="text/css">
        #div1{
            text-align:center;
            border:1px solid black;
            width:20%;
            height:200px;
            position:absolute;
            left:40%;
        }

        #campo1,#campo2{
            width:40px;
            margin:5px;
        }

        #btn1,#btn2, #btn3, #btn4{
            margin:3px;
        }

        #result{                
            float:center;

        }
    </style>


    <script language="javascript">


        var num1 = parseInt(document.getElementById("campo1").value);
        var num2 = parseInt(document.getElementById("campo2").value);
        var soma = (num1+num2);
        var subtracao = (num1-num2);
        var multiplicacao = (num1*num2);
        var divisao = (num1/num2);

        function somar(){
            if(isNaN(num1) || isNaN(num2)){
                alert("Os campos devem conter apenas numeros");
            }
            else{
                document.getElementByID("valorFinal").innerHTML = soma;         
            }
        }

        function subtrair(){
            if(isNaN(num1) || isNaN(num2){
                alert("Os campos devem conter apenas numeros");
            }
            else{
                document.getElementByID("valorFinal").innerHTML = subtracao;            
            }
        }

        function multiplicar(){ 
            if(isNaN(num1) || isNaN(num2){
                alert("Os campos devem conter apenas numeros");
            }
            else{
                document.getElementByID("valorFinal").innerHTML = multiplicao;          
            }
        }

        function dividir(){ 
            if(isNaN(num1) || isNaN(num2){
                alert("Os campos devem conter apenas numeros");
            }
            else{
                document.getElementByID("valorFinal").innerHTML = divisao;          
            }
        }

    </script>
</head>
<body>
    <div id="div1">
    <h1>Calculadora</h1>

    <input type="text" id="campo1" />
    <input type="text" id="campo2" /><br />

    <input type="button" value="+" id="btn1" onClick="somar()">
    <input type="button" value="-" id="btn2" onClick="subtrair()">
    <input type="button" value="*" id="btn3" onClick="multiplicar()">
    <input type="button" value="/" id="btn4" onClick="dividir()"><br />

    <b><label id="result">Resultado: </label></b>

    <p id="valorFinal"></p>
    </div>
</body>

javascript

asked by anonymous 10.11.2016 / 22:37

1 answer

Doubt About Socket Logic How to modify an attribute of an object in an ArrayList?

score 3 · Answer 1

When the browser reads these lines:

var num1 = parseInt(document.getElementById("campo1").value);
var num2 = parseInt(document.getElementById("campo2").value);

It immediately reads the value of these inputs and saves them in the variables. He does it once and never again. So what happens is that when you "do" the values that you could have written in the inputs are not in the variables num1 and num2 . However, if you keep pointers to the element itself, you can fetch the value later.

You need to update these values either every time you make an account or each time an input changes the value.

Doing a little DRY to the code could look like this:

var input1 = document.getElementById("campo1");
var input2 = document.getElementById("campo2");
var mostrador = document.getElementById("valorFinal");

function calculadora(fn) {
    var num1 = parseInt(input1.value, 10);
    var num2 = parseInt(input2.value, 10);
    if (isNaN(num1) || isNaN(num2)) alert("Os campos devem conter apenas numeros");
    else mostrador.innerHTML = fn(num1, num2);
}

function somar(a, b) {
    return a + b;
}

function subtrair(a, b) {
    return a - b;
}

function multiplicar(a, b) {
    return a * b;
}

function dividir(a, b) {
    return a / b;
}

 #div1 {
     text-align: center;
     border: 1px solid black;
     width: 40%;
     height: 200px;
     position: absolute;
     left: 40%;
 }
 
 #campo1,
 #campo2 {
     width: 40px;
     margin: 5px;
 }
 
 #btn1,
 #btn2,
 #btn3,
 #btn4 {
     margin: 3px;
 }
 
 #result {
     float: center;
 }

<div id="div1">
    <h1>Calculadora</h1>

    <input type="text" id="campo1" />
    <input type="text" id="campo2" />
    <br />

    <input type="button" value="+" id="btn1" onClick="calculadora(somar)">
    <input type="button" value="-" id="btn2" onClick="calculadora(subtrair)">
    <input type="button" value="*" id="btn3" onClick="calculadora(multiplicar)">
    <input type="button" value="/" id="btn4" onClick="calculadora(dividir)">
    <br />

    <b><label id="result">Resultado: </label></b>

    <p id="valorFinal"></p>
</div>

jsFiddle: link

Notice that the code like this should be at the end of <body> for JavaScript to find the elements it looks for in the DOM.