-2

Estou fazendo um projeto que calcula quanto o usuário gasta por mês e o seu lucro através das informações que ele digitou nos inputs, então ele irá clicar em um botão e aparecerá o seu resultado dentro de box's. A minha pergunta é... eu posso criar uma função que o seu objetivo é na execução de outras como mostra no código abaixo?

function resultados(){

    function mostraContainer(){
    let containerResultado = document.querySelector("#div-resultado");
    containerResultado.style.display = "block";
    } mostraContainer();

    let rendaPorMes = document.getElementById("rendaMensal").value;
    let aguaPorMes = document.getElementById("aguaMensal").value;
    let luzPorMes = document.getElementById("energiaMensal").value;
    let mercadoPorMes = document.getElementById("mercadoMensal").value;
    let habitacaoPorMes = document.getElementById("habitacaoMensal").value;
    let internetPorMes = document.getElementById("internetMensal").value;
    let televisaoPorMes = document.getElementById("TVMensal").value;
    let telefonePorMes = document.getElementById("telefoneMensal").value;
    let saudePorMes = document.getElementById("saudeMensal").value;
    let impostoPorMes = document.getElementById("impostoMensal").value;
    let veiculoPorMes = document.getElementById("automovelMensal").value;
    let despesasPessoaisPorMes = document.getElementById("despesasPessoaisMensal").value;
    let lazerPorMes = document.getElementById("lazerMensal").value;

    const somaDosGastosMensal = () => Number(aguaPorMes) + Number(luzPorMes) + Number(mercadoPorMes) + Number(habitacaoPorMes) + Number(internetPorMes) + Number(televisaoPorMes) + Number(telefonePorMes) + Number(saudePorMes) + Number(impostoPorMes) + Number(veiculoPorMes) + Number(despesasPessoaisPorMes) + Number(lazerPorMes); 
    const lucroMensal = () => Number(rendaPorMes) - somaDosGastosMensal();
    
    // Resultados Mensal: Lucro e Soma dos Gastos
    function resultadoLucroMensal(){
        let resultadoMensal = document.querySelector("#saldoDoMes");
        if(lucroMensal() > 0 ) resultadoMensal.innerText = `Seu mês fecha ANIMADO com um SALDO POSITIVO de  ${lucroMensal()} reais.`;
        else if(lucroMensal() === 0) resultadoMensal.innerText = `Seu mês fecha ZERADO!`;
        else resultadoMensal.innerText = `Seu mês fecha TRISTE com um SALDO NEGATIVO de  ${lucroMensal()} reais.`;
    } resultadoLucroMensal();

    function resultadoSomaMensal(){
        let somaMensal = document.querySelector("#somaDosGastosDoMes");
        somaMensal.innerText = `O seu gasto mensal é de ${somaDosGastosMensal()} reais.`;
        if(somaDosGastosMensal() === 0) somaMensal.innerText = `O seu gasto mensal está ZERADO!`;
    } resultadoSomaMensal();
}
#div-resultado{
    display: none;
}
<body>
        <header>
            <div class="container">
                <a href="index.html" class="titulo"><h1>Sua Renda<i class="fas fa-money-bill-wave"></i></h1></a>
            </div>
        </header>
        <main>
            <div class="container-items">
                <div class="box">
                    <h3>Quanto é o seu salário ou renda familiar mensal?</h3>
                    <label class="sr-only" for="rendaMensal">Digite seu salário ou renda Mensal</label>
                        <input type="number" name="rendaMensal" placeholder="R$" id="rendaMensal" required>
                </div>
            </div>
            <div class="anuncio">
                <h3>Agora vamos as perguntas que dirão o seu resultado. Okay? 😉<br> Ahh outra coisa! Se você não possui gasto ou não se lembra de algum valor das seguintes opções, SEM PROBLEMA é só pular!</h3>
            </div>
        </main>
        <section>
            <form>
                <div class="container-items">
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/agua.png" width="25%" alt="Água">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com ÁGUA por mês?</h3>
                            <label class="sr-only" for="aguaMensal">Digite quanto gasta com água por mês</label>
                                <input type="number" name="aguaMensal" placeholder="R$" id="aguaMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/luz.png" width="25%" alt="Energia">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com ENERGIA por mês?</h3>
                            <label class="sr-only" for="energiaMensal">Digite quanto gasta com energia por mês</label>
                                <input type="number" name="energiaMensal" placeholder="R$" id="energiaMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/mercado.png" width="25%" alt="Mercado">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com compras ao MERCADO por mês?</h3>
                            <label class="sr-only" for="mercadoMensal">Digite quanto gasta com mercado por mês</label>
                                <input type="number" name="mercadoMensal" placeholder="R$" id="mercadoMensal">
                        </div>
                    </div>
                </div>

                <!--2° LINHA-->
                <div class="container-items">
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/casa.png" width="25%" alt="Casa">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com ALUGUEL ou PRESTAÇÃO?</h3>
                            <label class="sr-only" for="habitacaoMensal">Digite quanto gasta com habitação(alguel ou prestação) por mês</label>
                                <input type="number" name="habitacaoMensal" placeholder="R$" id="habitacaoMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/wifi.png" width="25%" alt="internet">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com INTERNET por mês?</h3>
                            <label class="sr-only" for="internetMensal">Digite quanto gasta com internet por mês</label>
                                <input type="number" name="internetMensal" placeholder="R$" id="internetMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/tv.png" width="25%" alt="TV">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com TV (planos de assinatura) por mês?</h3>
                            <label class="sr-only" for="TVMensal">Digite quanto gasta com TV (planos de assinatura, etc) por mês</label>
                                <input type="number" name="TVMensal" placeholder="R$" id="TVMensal">
                        </div>
                    </div>
                </div>

                <!--3° LINHA-->
                <div class="container-items">
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/telefone.png" width="25%" alt="Telefone">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com TELEFONE (planos, créditos ou assinaturas) por mês?</h3>
                            <label class="sr-only" for="telefoneMensal">Digite quanto gasta com telefone(planos, créditos ou assinaturas) por mês</label>
                                <input type="number" name="telefoneMensal" placeholder="R$" id="telefoneMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/saude.png" width="25%" alt="Saúde">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com SAÚDE (planos, dentista, medicamentos, etc) por mês?</h3>
                            <label class="sr-only" for="saudeMensal">Digite quanto gasta com saude(planos, dentista, medicamentos, etc) por mês</label>
                                <input type="number" name="saudeMensal" placeholder="R$" id="saudeMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/imposto.png" width="25%" alt="Imposto">
                        <div class="textoEinput">
                            <h3>Quanto você paga em IMPOSTO (IR, INSS ou outros) por mês?</h3>
                            <label class="sr-only" for="impostoMensal">Digite quanto gasta com imposto(IR, INSS ou outros) por mês</label>
                            <input type="number" name="impostoMensal" placeholder="R$" id="impostoMensal">
                        </div>
                    </div>
                </div>

                <!--4° LINHA-->
                <div class="container-items">
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/automovel.png" width="25%" alt="Automóvel">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com o seu AUTOMÓVEL (prestação, combustível, seguro, etc) por mês?</h3>
                            <label class="sr-only" for="automovelMensal">Digite quanto gasta com automóvel(prestação, combustível, seguro, etc) por mês</label>
                            <input type="number" name="automovelMensal" placeholder="R$" id="automovelMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/despesaPessoal.png" width="25%" alt="Despesa Pessoal">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com DESPESAS PESSOAIS (vestuário, academia, cosméticos, etc) por mês?</h3>
                            <label class="sr-only" for="despesasPessoaisMensal">Digite quanto gasta com despesas pessoais(vestuário, academia, cosméticos, etc) por mês</label>
                            <input type="number" name="despesasPessoaisMensal" placeholder="R$" id="despesasPessoaisMensal">
                        </div>
                    </div>
                    <div class="box-itens">
                        <img src="assets/Imagens/Icones das perguntas/lazer.png" width="25%" alt="Lazer">
                        <div class="textoEinput">
                            <h3>Quanto você gasta com LAZER (restaurantes, passeios, livraria, etc) por mês?</h3>
                            <label class="sr-only" for="lazerMensal">Digite quanto gasta com lazer (restaurantes, passeios, livraria, etc) por mês</label>
                            <input type="number" name="lazerMensal" placeholder="R$" id="lazerMensal">
                        </div>
                    </div>
                </div>
            </form>
            <div class="botao">
                <input type="button" role="button" value="Calcular" id="botaoCalcular" onclick="resultados()">
            </div>
        </section>

        <section id="div-resultado">
            <div class="container-resultados">
                <div class="box-resultado">
                    <img src="assets/Imagens/Icones do resultado/saldo.png" width="20%" alt="Saldo do mês">
                    <h3 id="saldoDoMes"></h3>
                </div>
                
                <div class="box-resultado">
                    <img src="assets/Imagens/Icones do resultado/somaGastos.png" width="20%" alt="Soma dos gastos">
                    <h3 id="somaDosGastosDoMes"></h3>
                </div>
            </div>
                
            <div id="container-anual">
                <div id="box-anual">
                    <div id="imagemAnual">
                        <img src="assets/Imagens/Icones do resultado/resultadoAnual.png" id="imagemGrafico" width="60%" alt="Gráfico">
                    </div>
                    <div class="textoAnual">
                        <h2 id="tituloAnual">Sua média de gasto anual</h2>
                        <p id="paragrafoAnuncio">(De acordo com as informações fornecidas).</p>
                        <div id="dadosAnuais">
                            <p id="aguaPorAno"></p>
                            <p id="luzPorAno"></p>
                            <p id="mercadoPorAno"></p>
                            <p id="habitacaoPorAno"></p>
                            <p id="internetPorAno"></p>
                            <p id="televisaoPorAno"></p>
                            <p id="telefonePorAno"></p>
                            <p id="saudePorAno"></p>
                            <p id="impostoPorAno"></p>
                            <p id="veiculoPorAno"></p>
                            <p id="despesasPessoaisPorAno"></p>
                            <p id="lazerPorAno"></p> 
                            <div align="center">
                                <hr width="55%">
                            </div> 
                        </div>
                        <div class="relatorioBasico">
                            <p id="rendaAnual"></p>
                            <p id="somaDosGastosAnual"></p>
                            <p id="lucroAnual"></p>
                        </div>
                    </div>
                </div>
                <div id="agradecimento" align="center">
                    <h2>MUITO OBRIGADO por ter usado o meu projeto!<br> Espero que tenha gostado da experiência <a href="#" onclick="misterio()">😁</a></h2>
                </div>
            </div>
        </section>
        <footer>
     </body>

11
  • Cadê o HTML desse código? Poderia esclarecer a pergunta eu posso criar uma função que o seu objetivo é na execução de outras como mostra no código abaixo? Commented 11/07/2021 às 2:48
  • Por link não, nós temos uma regra que código deve estar aqui na página. Commented 11/07/2021 às 2:59
  • Opa, não sabia Augusto. Alias desculpa pela demora para arrumar aqui, sou novato no stack também. Mas voltando ao assunto deixa eu ver como eu posso me expressar. O usuário preencheu tudo certinho, e clicou em calcular, quando ele clicou em calcular aparece os resultados. Tenho duas coisas aqui: tenho que fazer aparecer o container que está os resultados e além disso calcular eles. Tentei fazer isso de várias formas e não consegui, a única forma foi colocando as funções dentro de uma outra que vai abranger a todas. Achei bem estranho isso, e eu queria saber se pode isso ou se tem algo melhor. Commented 11/07/2021 às 3:21
  • No caso se teria alguma solução melhor para esse "problema". Muito obrigado pela paciência meu amigo. Commented 11/07/2021 às 3:23
  • Você está falando disso function resultadoLucroMensal(){... ...) resultadoLucroMensal(); que dentro de uma função você declara outra função e logo em seguida a chama? Se for isso pergunto se já viu as IIFE (Immediately Invoked Function Expression) são semanticamente mais adequadas para isso. Commented 11/07/2021 às 3:39

1 Resposta 1

-1

Uma das coisas mais importantes para se pensar enquanto programa com JS é que,
basicamente, tudo é objeto.

Claro que isso pode soar como uma generalização, mas basicamente qualquer estrutura de dados em JavaScript é um objeto, ou seja, um espaço na memória que guarda informações que você fornece. Até aí tudo entendido, certo?

Agora chegando direto na sua dúvida. Sim, funções também são objetos, e podem guardar suas próprias informações, como no caso, outras funções. A título de exemplo (em uma função não construtora):

function a()
{
  function a1(){} // 1st child
  function a2(){} // 2nd child
}

Nesse caso, para acessar uma das funções de dentro da função a, uma das formas é chamá-la e em seguida, sua função filha em formato de método. Nesse caso:

a().a1();

Visto isso, acredito que a maior dúvida tenha sido sanada. Agora como você poderia receber o resultado de todas as funções filhas uniformemente?

Em JS, utiliza-se a declaração return para, naturalmente, retornar valores de dentro da execução de uma função. Imagine a seguinte situação:

function resultado(a, b, c)
{
let soma;
let multi;
  function soma () {soma = a + b}
  function multi () {multi = a * c}
}

Como poderia receber, da melhor forma, ambas as variáveis soma e multi? Utilizando, exatamente, a declaração return no final da função, adicionando-a numa função.

    function resultado(a, b, c)
    {
    let soma;
    let multi;
      function somar() {soma = a + b}
      function multiplicar() {multi = a * c}
      
      somar();
      multiplicar();
      
      return {soma, multi}
    }
    
    let result = resultado(2, 3, 5);
    console.log(result)

Como pode-se observar, as chaves ( {} ) indicam que o valor retornado será também um objeto, com ambos os resultados soma e multi. Este objeto está sendo guardado na variável result.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .