Preciso de ajuda para reduzir esse código | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por gabriel.lyrat

| 111.3k xp | 12 posts

Olá caros amigos, tudo bem? Estou desenvolvendo uma calculadora para dois números através de caixa de textos, consegui, mas gostaria de reduzir esse código na parte da leitura dos valores das caixas, como eu posso fazer?

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teste de querySelector</title>
</head>

<body>
    <form id="form">
        <fieldset>
            <legend>Entrada dos números</legend>
            <label for="txt1">Número 1:</label><input type="text" id="txt1" placeholder="Digite um número">
            <label for="txt2">Número 2:</label><input type="text" id="txt2" placeholder="Digite um número">
        </fieldset>
        <fieldset>
            <legend>Operações</legend>
            <input type="button" value="+" id="btnsomar">
            <input type="button" value="-" id="btnsubtrair">
            <input type="button" value="/" id="btndividir">
            <input type="button" value="*" id="btnmultiplicar">
        </fieldset>
    </form>
    <script src="main.js"></script>
</body>

</html>

javaScript

var somar = document.querySelector("#btnsomar");
var subtrair = document.querySelector("#btnsubtrair");
var dividir = document.querySelector("#btndividir");
var multiplicar = document.querySelector("#btnmultiplicar");

somar.addEventListener("click",resultadoSomar);
subtrair.addEventListener("click",resultadoSubtrair);
dividir.addEventListener("click",resultadoDividir);
multiplicar.addEventListener("click",resultadoMultiplicar);

function resultadoSomar(){
    var n1 = Number(document.querySelector("#txt1").value);
    var n2 = Number(document.querySelector("#txt2").value);
    var caixaResultado = document.querySelector(".resultado");
    var resultado = n1+n2;
    caixaResultado.textContent = "O resultado é igual a :"+resultado ;
}

function resultadoSubtrair(){
    var n1 = Number(document.querySelector("#txt1").value);
    var n2 = Number(document.querySelector("#txt2").value);
    var caixaResultado = document.querySelector(".resultado");
    var resultado = n1-n2;
    caixaResultado.textContent = "O resultado é igual a :"+resultado ;
}

function resultadoDividir(){
    var n1 = Number(document.querySelector("#txt1").value);
    var n2 = Number(document.querySelector("#txt2").value);
    var caixaResultado = document.querySelector(".resultado");
    var resultado = n1/n2;
    caixaResultado.textContent = "O resultado é igual a :"+resultado ;
}

function resultadoMultiplicar(){
    var n1 = Number(document.querySelector("#txt1").value);
    var n2 = Number(document.querySelector("#txt2").value);
    var caixaResultado = document.querySelector(".resultado");
    var resultado = n1*n2;
    caixaResultado.textContent = "O resultado é igual a :"+resultado ;
}

3 respostas

por Gabriel Cruz

| 219.4k xp | 19 posts

Desenvolvedor Pleno

06/04/2020

Uma alternativa seria assim, tentei diminuir a repetição de código, espero que seja últil (ainda dá pra melhorar, eu sei, mas foi o que consegui pensar neste momento, a gente pode melhorar mais..):

function resultadoSomar(num1, num2){
    return num1 + num2;
}

function resultadoSubtrair(num1, num2){
    return num1 - num2;
}

function resultadoDividir(num1, num2){
    return num1 / num2;
}

function resultadoMultiplicar(num1, num2){
    return num1 * num2;
}

function getResultado(event) {

    var num1 = Number(document.querySelector("#txt1").value);
    var num2 = Number(document.querySelector("#txt2").value); 

    switch(event.target.value) {
        case "+":
            return resultadoSomar(num1, num2);
            break;
        case "-":
            return resultadoSubtrair(num1, num2);
            break;
        case "*":
            return resultadoMultiplicar(num1, num2);
            break;
        case "/":
            return resultadoDividir(num1, num2);
            break;
    }

    return 0;
}

var formulario = document.querySelector("#form");

formulario.addEventListener("click", function (event) {
    event.preventDefault();

    var botaoClicado = (event.target.type == "button")

    if (!botaoClicado) {
        return;
    }

    var fraseResultado = "O resultado é igual a :" + getResultado(event);
    document.querySelector(".resultado").innerHTML = fraseResultado;
});

por gabriel.lyrat

| 111.3k xp | 12 posts

06/04/2020

Caramba. O legal de programar é aprender com a comunidade, muito obrigado. Ficou bem legal assim , rodei aqui e funcionou. Eu estava aqui tentando criar de uma outra forma, tipo, criava uma função para ler as caixas e acionava elas quando clicava nos botões antes de realizar os cálculos, não consegui kkkk, o que me passou atinge bem o que queria. Obrigadão.

solução!

por Gabriel Cruz

| 219.4k xp | 19 posts

Desenvolvedor Pleno

06/04/2020

Show, fico feliz de ter ajudado!