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? <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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(); } <!-- language: lang-css --> #div-resultado{ display: none; } <!-- language: lang-html --> <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> <!-- end snippet -->