Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como evitar o uso dos if em uma calculadora em JavaScript

por Bernardo Afonso Nascimento silva
| 67k xp | 23 posts

Estava fazendo uma calculadora em JavaScript para testar e para definir a operação que será feita uso um select com as options das operaçoes, mas para usar a operação selecionada só consegui usando os if, e não gostei, alguém poderia me ajudar? vou deixar o código aqui Js

var pegSubmit = document.querySelector("#submit");
pegSubmit.addEventListener('click', (event)=>{
    event.preventDefault();
    var pegn1 = document.querySelector("#n1");
    var pegn2 = document.querySelector("#n2");
    var n1 = pegn1.value;
    var n2 = pegn2.value;
    var select = document.querySelector("#selecao");
    var operacao = select.options[select.selectedIndex].value;
    var resultado = 0;

    if(operacao == "+"){
        resultado = parseInt(n1) + parseInt(n2);
    }else if(operacao == "-"){
        resultado = n1 - n2;
    }else if(operacao == "*"){
        resultado = n1 * n2;
    }else if(operacao == "/"){
        resultado = n1 / n2;
    }
    console.log(resultado)
    var pegEspaco = document.querySelector("#espaco");
    pegEspaco.textContent = resultado;
});

HTML

<!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</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="calc">
        <h1>CALCULADORA</h1>
        <p>Entre com os numeros</p>
        <input type="number" id="n1">
        <select id="selecao">
            <option>Escolha a operação</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" id="n2">
        <input type="submit" value="Calcular" id="submit">
        <h2>Resultado</h2>
        <p id="espaco"></p>
    </div>
    <script src="index.js"></script>
</body>
</html>
2 respostas
solução!
por Cândido Luiz Lucas De França
| 22.6k xp | 33 posts

Bernardo, uma outra solução possível é usar o switch - case com o javascript (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/switch):

switch(operacao){
    case "+":
        resultado = parseInt(n1) + parseInt(n2);
        break;
    case "-":
        reusltado = resultado = n1 - n2;
        break;
    //continua com as outras possibilidades
}

É possível resolver de outras maneiras. Outra forma que pensei, sem utilizar os if/elses, seria reestruturando o código da seguinte forma: No HTML, alteraria estrutura do select, passando os seguintes values:

<select id="selecao">
    <option>Escolha a operação</option>
    <option value="soma">+</option>
    <option value="subtracao">-</option>
    <option value="multiplicacao">*</option>
    <option value="divisao">/</option>
</select>

E no script, adicionaria um objeto contendo cada uma das operações da calculadora:

var funcoesCalculo = {
    soma: (n1, n2) => {
        return n1 + n2;
    },
    subtracao: (n1, n2) => {
        return n1 - n2;
    },
    multiplicacao: (n1, n2) => {
        return n1 * n2;
    },
    divisao: (num1, n2) => {
        return n1 / n2;
    },
};

Feito isso, para obter os resultados das operações: 

//Continuando o seu método...
var operacao = select.options[select.selectedIndex].value;
var resultado = 0;

var calcular = funcoesCalculo[operacao]; //Buscando a operação de cálculo de forma dinâmica

resultado = calcular(n1, n2); // Calculando o resultado

console.log(resultado)

Claro, você pode utilizar quaisquer métodos que achar melhor ou mais simples de entender, como o uso do switch/case ou do if/else.

por Bernardo Afonso Nascimento silva
| 67k xp | 23 posts

valeu achei bem daora os dois metodos que vc mostrou