Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Duvida na utilização de input.value

<meta charset="UTF-8">

<input id="operacao"/> Digite qual operação você deseja realizar (+,-,*,/)<br>
<input id="numero1"/> Primeiro Numero<br>
<input id="numero2"/> Segundo Numero<br>
<button>CALCULAR</button>

<script>

    function soma(n1,n2){
        return n1+n2;
    }

    function subtracao(n1,n2){
        return n1-n2;
    }

    function multiplicacao(n1,n2){
        return n1*n2;
    }
    function divisao(n1,n2){
        return n1/n2;
    }

    var operacao= document.querySelector("#operacao");
    var numero1= document.querySelector("#numero1");
    var numero2= document.querySelector("#numero2");

    var soma = soma(numero1.value,numero2.value);
    var subtracao = subtracao(numero1.value,numero2.value);
    var multiplicacao = multiplicacao(numero1.value,numero2.value);
    var divisao = divisao(numero1.value,numero2.value);

    function calculadora(){
        if(operacao.value=="+"){
            alert("A soma é: "+soma);
        }else{
            if(operacao.value=="-"){
                alert("A subtração é: "+subtracao);
            }else{
                if(operacao.value=="*"){
                    alert("A multiplicacao é: "+multiplicacao);    
                }else{
                    if(operacao.value=="/"){
                        alert("A divisao é: "+divisao);
                    }

                }
            }
        }
    }

    var button = document.querySelector("button");
    button.onclick = calculadora;




</script>



Estava criando um calculadora usando o input e o button porem nao consigo termina-la, pelo que me parece não estou conseguindo pegar os valores de numero1 e numero2

2 respostas
solução!

Olá! Tudo bem? Nesse caso está acontecendo o problema de que os valores de numero1 e numero2 só estão sendo armazenados uma vez, assim que a página é aberta, então o value deles sempre vai ser nulo. O que precisamos fazer nesse caso é usar escutadores de evento (eventListeners) que vão "vigiar" um elemento para ver se algum evento aconteceu, que vai ser configurado para um tipo específico de evento, como click, change (mudança de algum valor), close (quando fecha), drag (efeito de arrastar) e entre outros. Nesse caso vamos usar o evento do tipo change, que vai ser disparado sempre que alguma mudança nos inputs acontecer. O código JavaScript ficou assim:

<script>
    function soma(n1,n2){
        return n1+n2;
    }

    function subtracao(n1,n2){
        return n1-n2;
    }

    function multiplicacao(n1,n2){
        return n1*n2;
    }
    function divisao(n1,n2){
        return n1/n2;
    }

    // Inicializando as variáveis com alguns valores padrões para evitar problemas,
    // porque se elas forem acessadas antes de terem algum valor definido pode acontecer um erro
    var operacao = "+";
    var numero1 = 0;
    var numero2 = 0;

    // Encontrando os inputs no HTML
    var inputOperacao = document.querySelector("#operacao");
    var inputNumero1 = document.querySelector("#numero1");
    var inputNumero2 = document.querySelector("#numero2");

    // Adicionando o escutador de evento, para detectar qualquer mudança
    // nos inputs e assim atualizar o valor das variáveis

    inputNumero1.addEventListener('change', (evento) => {
        // Chamando Number no valor do input pois eles vem como String por padrão, então se for realizada a soma
        // vamos ter problemas, como "2" + "2" = "22" ao invés de 2 + 2 = 4
        numero1 = Number(evento.target.value);
    });
    inputNumero2.addEventListener('change', (evento) => {
        numero2 = Number(evento.target.value);
    });
    inputOperacao.addEventListener('change', (evento) => {
        operacao = evento.target.value;
    });

    // Tive que renomear as variáveis e colocar elas dentro das condicionais para não dar 
    // conflito entre a função que faz o cálculo e a variável que guarda o resultado, já que elas tinham o mesmo nome

    function calculadora(){

        // Tirei os elses já que nesse caso eles não são necessários
        // porque não tem como as condições entrarem em conflito nesse caso
        // já que é impossível a operação ser igual a + e a - ao mesmo tempo, por exemplo

        if(operacao=="+"){
            var somaDosNumeros = soma(numero1,numero2);
            alert("A soma é: "+somaDosNumeros);
        }
        if(operacao=="-"){
            var subtracaoDosNumeros = subtracao(numero1,numero2);
            alert("A subtração é: "+subtracaoDosNumeros);
        }
        if(operacao=="*"){
            var multiplicacaoDosNumeros = multiplicacao(numero1,numero2);
            alert("A multiplicacao é: "+multiplicacaoDosNumeros);    
        }
        if(operacao=="/"){
            var divisaoDosNumeros = divisao(numero1,numero2);
            alert("A divisao é: "+divisaoDosNumeros);
        }
    }

    var button = document.querySelector("button");
    button.onclick = calculadora;
</script>

A variável evento que aparece na parte dos addEventListener() são variáveis que o próprio JavaScript disponibiliza quando usamos essa função. Essa variável armazena variás informações sobre o evento que aconteceu, a informação que precisamos usar nesse caso foi o atributo target, que é o elemento que foi alvo do evento, que no seu programa são os inputs, então sendo inputs nós podemos acessar o atributo value com o valor atualizado, que vai ser armazenado nas variáveis numero1, numero2 e operacao. Espero ter ajudado!

Ajudou sim, muito obrigado!