1
resposta

Duvida sobre calculadora Javascript

Oi boa tarde, gente to com uma duvida

Esse é o código que montei de calculadora ( eu tive que faze-la apenas usando funções e metodos), eu adicionei as funções basicas, porem queria colocar o botão decimal, e o botão de backspace, porem o unico jeito que achei foi usando document.getElementById('...').addEventListener('click', ...), só que quando uso esse metodo, ele me retorna um erro por conta do addEventListener

Meu código está assim o js dele:

//Função que adiciona os numeros no visor quando pressionado os botões
function calculaNumero(numero){
    if(typeof gvisor == 'undefined'){
        document.calcform.visor.value = '';
    }
    document.calcform.visor.value = document.calcform.visor.value + numero;
    gvisor = 1;
}
//Função que limpa o visor da Calculadora
function calcLimpar () {
    document.calcform.visor.value = '';
    delete gvalor;
    delete goper;
    delete gvisor;
}

//Funções Matemáticas
function calculaOperador (oper, valor1, valor2){
    if(oper == "somar"){
        var valor = parseFloat(valor1) + parseFloat(valor2);
    }else{
            if(oper == "subtrair"){
                var valor = valor1 - valor2;
            }else{
                if(oper == "multiplicar"){
                    var valor = valor1*valor2;
                }else{
                    if( oper == "dividir" && valor2 == 0){
                        var valor = document.calcform.visor.value = 'Math Error'; 
                    }else{
                        var valor = valor1 / valor2;
                    }

                }
            }
        }
        return(valor);
    }


//Função do algoritmo de transição das açoes do usuário

function calcParse(oper){
    var valor = document.calcform.visor.value;
    delete gvisor;

    if (typeof goper != 'undefined' && oper == 'resultado'){
        gvalor = calculaOperador(goper, gvalor, valor);
        goper = oper;
        document.calcform.visor.value = gvalor;
    }else{
        gvalor = valor;
        goper = oper;
    }
}

o html dele está assim:

<!DOCTYPE html>
<html lang="pt-BR" >
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Calculadora operacional - Bruno </title>

<link rel="stylesheet" href="style.css">
<script src="calculadora.js"></script>

</head>
<body>
   <div class="fundo">

<form name="calcform" method="post" action="">
   <fieldset class="alinhamento">
      <legend></legend>

      <input type="text" name="visor" id="visor" />

      <table id="calc" class="calculadora">
         <tr>
            <td><input type="button" name="num9" class="numero" value="9" onclick="calculaNumero(9)" /></td>
            <td><input type="button" name="num8" class="numero" value="8" onclick="calculaNumero(8)" /></td>
            <td><input type="button" name="num7" class="numero" value="7" onclick="calculaNumero(7)" /></td>
            <td><input type="button" name="somar" class="oper" value="+" onclick="calcParse('somar')"/></td>
         </tr>
         <tr>
            <td><input type="button" name="num6" class="numero" value="6" onclick="calculaNumero(6)" /></td>
            <td><input type="button" name="num5" class="numero" value="5" onclick="calculaNumero(5)" /></td>
            <td><input type="button" name="num4" class="numero" value="4" onclick="calculaNumero(4)" /></td>
            <td><input type="button" name="subtrair" class="oper" value="-" onclick="calcParse('subtrair')" /></td>
         </tr>
         <tr>
            <td><input type="button" name="num3" class="numero" value="3" onclick="calculaNumero(3)" /></td>
            <td><input type="button" name="num2" class="numero" value="2" onclick="calculaNumero(2)" /></td>
            <td><input type="button" name="num1" class="numero" value="1" onclick="calculaNumero(1)" /></td>
            <td><input type="button" name="multiplicar" class="oper" value="*" onclick="calcParse('multiplicar')"  /></td>
         </tr>
         <tr>
            <td><input type="button" name="num0" class="numero" value="0" onclick="calculaNumero(0)" /></td>
            <td><input type="button" name="igual" class="numero" value="=" onclick="calcParse('resultado')" /></td>
            <td><input type="button" name="limpar" class="numero" value="AC" onclick="calcLimpar()" /></td>
            <td><input type="button" name="dividir" class="oper" value="/" onclick="calcParse('dividir')" /></td>
         </tr>
      </table>
   </fieldset>
</form>


</div>

</body>
</html>
1 resposta
O post foi fechado por inatividade após 3 meses. Para continuar o assunto, recomendamos criar um novo tópico. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software