Calculator with inputs using DOM

Question

Calculator with inputs using DOM

Asked 3 years, 12 months ago

Viewed 53 times

0

If you put number in the inputs and choose the operation, the result should come out in a alert. But Alert is not working.

    let botao = document.getElementsByClassName('mybutton')
    botao.onclick = function(){
    let num1 =  Number(document.getElementById('num1').value)
    let num2 =  Number(document.getElementById('num2').value)
    let oper = document.getElementById('oper')
    let resultado = 0
    if(oper === '+'){
        resultado = num1 + num2
        alert(resultado)
    }else if(oper === '-'){
        resultado = num1 - num2
        alert(resultado)
    }else if( oper === '/'){
        resultado = num1 / num2
        alert(resultado)
    }else{
        resultado = num1*num2
        alert(resultado)
    }
}

     <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <title> Calculadora em javascript</title>
        </head>
        <body>
            <h1>Calculadora</h1>
            <form>
                <input type="text" placeholder="Digite o primeiro numero" id="num1">
                <input type="text" placeholder="Digite o segundo numero" id="num2">
                <input type="text" placeholder= "Digite a operação + - / * " id="oper">
                <button class="mybutton"> Calcular </button>
    
            </form>
        </body>
    </html>

Your code script.js is in the folder js? As defined <script src="js/script.js"></script>.

– ThRnk

2020/10/09 at 13:42

1 answer

Browser other questions tagged javascript

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

by hkotsubo • **55,826** points · Answer 1 · 2020-10-09T13:50:24+00:00

getElementsByClassName returns a list of elements (note that the name is getElements, plural).

Then you should only take the first one from the list to have the button (as there is only one, it is okay to do so):

// pega o primeiro elemento da lista retornada por getElementsByClassName
let botao = document.getElementsByClassName('mybutton')[0];
botao.onclick = function(e){
    let num1 =  Number(document.getElementById('num1').value);
    let num2 =  Number(document.getElementById('num2').value);
    let oper = document.getElementById('oper').value;
    if (oper === '+'){
        alert(num1 + num2);
    } else if(oper === '-'){
        alert(num1 - num2);
    } else if( oper === '/'){
        alert(num1 / num2);
    } else if (oper === '*') {
        alert(num1 * num2);
    } else {
        alert('operação inválida');
    }
    e.preventDefault();
}

     <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <title> Calculadora em javascript</title>
        </head>
        <body>
            <h1>Calculadora</h1>
            <form>
                <input type="text" placeholder="Digite o primeiro numero" id="num1">
                <input type="text" placeholder="Digite o segundo numero" id="num2">
                <input type="text" placeholder= "Digite a operação + - / * " id="oper">
                <button class="mybutton"> Calcular </button>
    
            </form>
        </body>
    </html>

Also note that for the operation you were not catching the value, then you were comparing the input (and not its value) with +, -, etc - and he fell at the last else, that is, always did the multiplication. Using the value and putting a if plus, it gets better because now it validates all operations or gives a message in case of invalid operation.

And I also used preventDefault to prevent the form is submitted and the data of the page "sumam" by clicking on the button.

Of course another option would be to have a button id:

<button id="mybutton"> Calcular </button>

Then you could do:

document.getElementById('mybutton').onclick = function () {  etc...

For id's must be unique on a page, and getElementById returns a single element.