TransWikia.com

Calculadora com inputs usando DOM

Stack Overflow em Português Asked by ash on December 2, 2020

Se colocar número nos inputs e escolher a operação, deveria sair o resultado em um alert. Porém o alert não está funcionando.

    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>


 

One Answer

getElementsByClassName retorna uma lista de elementos (note que o nome é getElements, no plural).

Então você deveria pegar somente o primeiro da lista para ter o botão (como só tem um, não tem problema fazer assim):

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

Repare também que para a operação você não estava pegando o value, então você estava comparando o input (e não o valor dele) com +, -, etc - e ele caía no último else, ou seja, sempre fazia a multiplicação. Usando o value e colocando um if a mais, fica melhor, pois agora ele valida todas as operações ou dá uma mensagem em caso de operação inválida.

E também usei preventDefault para evitar que o form seja submetido e os dados da página "sumam" ao clicar no botão.


Claro que outra opção seria o botão ter um id:

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

Aí você poderia fazer:

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

Pois id's devem ser únicos em uma página, e getElementById retorna um único elemento.

Answered by hkotsubo on December 2, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP