Function created to perform other functions

Asked

Viewed 74 times

-2

I’m doing a project that calculates how much the user spends per month and their profit through the information he typed in the inputs, so he will click on a button and his result will appear inside the box. My question is... I can create a function that your goal is in the execution of others as shown in the code below?

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>

javascript function

  • Where is the HTML of this code? Could clarify the question i can create a function that your goal is in the execution of others as shown in the code below?

  • By link no, we have a rule that code should be here on the page.

  • Opa, did not know Augusto. Alias sorry for the delay to tidy here, I’m new to the stack too. But back to the subject let me see how I can express myself. The user filled in everything right, and clicked on calculate, when he clicked on calculate appears the results. I have two things here: I have to show the container that is the results and also calculate them. I tried to do this in various ways and I couldn’t, the only way was to put the functions inside one that will cover all. I thought it was pretty strange, and I was wondering if you could do that or if you have something better.

  • In case there would be some better solution to this "problem". Thank you very much for patience my friend.

  • You’re talking about this function resultadoLucroMensal(){... ...) resultadoLucroMensal(); that within a function you declare another function and soon after the flame? If so I ask if you have seen the IIFE (Immediately Invoked Function Expression) are semantically more suitable for this.

  • I’ll see about that too, but I’m talking about the Function results(){.... ..... } and if it’s not strange to have several other functions within it. What do you think?

  • The way you did it is even executed yes! But doing it is kind of weird.. rss

  • In your case the simplest is to create the functions independently (instead of one within the other), and in the function resultados vc only calls them. Creating a function within another has very specific uses that do not apply to your case (such as that), and furthermore is more inefficient because internal functions are recreated all the time

  • And it doesn’t make sense that lot of Arrow Function (the syntax() => etc) because in your case you could have the value directly: somaDosGastosMensal = Number(aguaPorMes) + etc (thus the variable somaDosGastosMensal already has the direct value, without needing the parentheses to use it).

  • A hint: vc can add a class in inputs that are expenses (for example, class="despesa"), then just do document.querySelectorAll('input[type="number"].despesa') that you’ll already have them all, just one for to add them. Something like this: https://jsfiddle.net/ypx4ezs5/ (see also that here the functions are separated, and some receive parameters - which is even one of the ideas of a function: generalize its operation based on parameters). See how it looks - in my opinion - simpler

  • Caraca!!! Thanks a lot for the tips. With this class="depesas" will simplify too much, instead of adding each category in the expenses. Again, thank you so much for the tip!

Show 6 more comments

1 answer

-1

One of the most important things to think about as a JS program is that,
basically, everything is object.

Of course this may sound like a generalization, but basically any data structure in Javascript is an object, that is, a space in memory that stores information that you provide. So far so understood, right?

Now coming right up to your question. Yes, functions also are objects, and can save their own information, as in the case, other functions. By way of example (in a function nonconstruction):

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

In this case, to access one of the functions from within the function a, one of the ways is to call it and then its function daughter in method format. In this case:

a().a1();

Having said that, I believe the greatest doubt has been resolved. Now how could you receive the result of all daughter functions evenly?

In JS, the declaration is used return to, of course, return values from within the execution of a function. Imagine the following situation:

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

How it could receive, in the best way, both variables soma and multi? Using exactly the statement return at the end of the function, adding it to a function.

    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)

As you can see, the keys ( {} ) indicate that the returned value will also be an object, with both results soma and multi. This object is being stored in the variable result.

Browser other questions tagged javascript function

You are not signed in. Login or sign up in order to post.