"Javascript function calling child functions"

Asked

Viewed 153 times

0

Fala devs blz?

next, I need your help.

I’m new at js.

next

i have js functions that are on the onload of body (automatically run all when the page loads).

but I think it gets polluted mt extensive

my idea and make a parent function that will call all child functions

ai no body onload I would put only one function that would call the others.

my site (gitpage) is already on the air if you want to access for a look https://dannslima.github.io/danilovasconcelos/

these functions are to create an animated status bar as in the photo below

inserir a descrição da imagem aqui

     <body onload="html() , css() , saudacao() , javascript() , bancoDados() , gitHub() , server() , ">



    > // FUNÇÃO DA BARRA DE STATUS ANIMADA 

        var progresso = new Number();
        var maximo = new Number();
        progresso = 0;
        maximo = 65;

       > // FUNÇÃO DA BARRA CSS //
        function css() {

            if ((progresso + 1) < maximo) {
                document.getElementById('pg').value = progresso;
                setTimeout("css();", 30);
                progresso++;
            }
        }
     >   // FUNÇÃO DA BARRA HTML //

        var progresso2 = new Number();
        var maximo2 = new Number();
        progresso2 = 0;
        maximo2 = 85;

        function html() {

            if ((progresso2 + 1) < maximo2) {
                document.getElementById('pg2').value = progresso2;
                setTimeout("html();", 30);
                progresso2++;
            }
        }

    >    // FUNÇÃO DA BARRA JAVASCRIPT //
        var progresso3 = new Number();
        var maximo3 = new Number();
        progresso3 = 0;
        maximo3 = 70;

        function javascript() {

            if ((progresso3 + 1) < maximo3) {
                document.getElementById('pg3').value = progresso3;
                setTimeout("javascript();", 30);
                progresso3++;
            }
        }

        // FUNÇÃO DA BARRA BANCO DE DADOS //
        var progresso4 = new Number();
        var maximo4 = new Number();
        progresso4 = 0;
        maximo4 = 65;

    >    function bancoDados() {

            if ((progresso4 + 1) < maximo4) {
                document.getElementById('pg4').value = progresso4;
                setTimeout("bancoDados();", 30);
                progresso4++;
            }
        }

     >   // FUNÇÃO DA BARRA GitHub //
        var progresso5 = new Number();
        var maximo5 = new Number();
        progresso5 = 0;
        maximo5 = 50;

        function gitHub() {

            if ((progresso5 + 1) < maximo5) {
                document.getElementById('pg5').value = progresso5;
                setTimeout("gitHub();", 30);
                progresso5++;
            }
        }


  >      // FUNÇÃO DA BARRA WINDOWS SERVER E VIRTUALIZAÇÃO //
        var progresso6 = new Number();
        var maximo6 = new Number();
        progresso6 = 0;
        maximo6 = 80;

        function server() {

            if ((progresso6 + 1) < maximo6) {
                document.getElementById('pg6').value = progresso6;
                setTimeout("server();", 30);
                progresso6++;
            }
        }

        // FUNÇÃO DA BARRA INFRAESTRUTURA E REDES //
        var progresso7 = new Number();
        var maximo7 = new Number();
        progresso7 = 0;
        maximo7 = 75;
javascript html5 css3

  • But what is your doubt?

  • I want to set up a parent function that will call the child functions. , because there on the onload body I would put a single function that would call the others. turns out that I tried to do it but couldn’t... I did so html() ; css() ; javascript(); }

3 answers

3


simply place your code within a single function and call your other functions inside, for example:

function init() {

        // FUNÇÃO DA BARRA DE STATUS ANIMADA 

        var progresso = new Number();
        var maximo = new Number();
        progresso = 0;
        maximo = 65;

        // FUNÇÃO DA BARRA CSS //
        (function css() {
            console.log("css");
            if ((progresso + 1) < maximo) {
                document.getElementById('pg').value = progresso;
                setTimeout("css();", 30);
                progresso++;
            }
        })();
        // FUNÇÃO DA BARRA HTML //

        var progresso2 = new Number();
        var maximo2 = new Number();
        progresso2 = 0;
        maximo2 = 85;

        (function html() {
            console.log('html');
            if ((progresso2 + 1) < maximo2) {
                document.getElementById('pg2').value = progresso2;
                setTimeout("html();", 30);
                progresso2++;
            }
        })();

        // FUNÇÃO DA BARRA JAVASCRIPT //
        var progresso3 = new Number();
        var maximo3 = new Number();
        progresso3 = 0;
        maximo3 = 70;

        (function javascript() {
            console.log("js");
            if ((progresso3 + 1) < maximo3) {
                document.getElementById('pg3').value = progresso3;
                setTimeout("javascript();", 30);
                progresso3++;
            }
        })();

        // FUNÇÃO DA BARRA BANCO DE DADOS //
        var progresso4 = new Number();
        var maximo4 = new Number();
        progresso4 = 0;
        maximo4 = 65;

        (function bancoDados() {
            console.log("bd");
            if ((progresso4 + 1) < maximo4) {
                document.getElementById('pg4').value = progresso4;
                setTimeout("bancoDados();", 30);
                progresso4++;
            }
        })();

        // FUNÇÃO DA BARRA GitHub //
        var progresso5 = new Number();
        var maximo5 = new Number();
        progresso5 = 0;
        maximo5 = 50;

        (function gitHub() {
            console.log('git')
            if ((progresso5 + 1) < maximo5) {
                document.getElementById('pg5').value = progresso5;
                setTimeout("gitHub();", 30);
                progresso5++;
            }
        })();


        // FUNÇÃO DA BARRA WINDOWS SERVER E VIRTUALIZAÇÃO //
        var progresso6 = new Number();
        var maximo6 = new Number();
        progresso6 = 0;
        maximo6 = 80;

        (function server() {
            console.log("OK");
            if ((progresso6 + 1) < maximo6) {
                document.getElementById('pg6').value = progresso6;
                setTimeout("server();", 30);
                progresso6++;
            }
        })();

        // FUNÇÃO DA BARRA INFRAESTRUTURA E REDES //
        var progresso7 = new Number();
        var maximo7 = new Number();
        progresso7 = 0;
        maximo7 = 75;

    }

you can make the function call right after declaring it that way: 

(function exemplo(){
   //codigo
})();

with this you would only need to call the main function

<body onload="init();">

0

Simple, you just need to create a function and call the others within it. It is worth noting that you should not use var instead prefer to use let or in the case of some variables, you can use const. Avoid using variables in global scopes. And you don’t need to declare the type with new for later set. See variables.

<body onload="loadBars()">

    function loadBars(){
       html();
       css(); 
       saudacao();
       javascript();
       bancoDados();
       gitHub();
       server();
    }

> // FUNÇÃO DA BARRA DE STATUS ANIMADA 

    let progresso = 0
    const maximo = 65

   > // FUNÇÃO DA BARRA CSS //
    function css() {

        if ((progresso + 1) < maximo) {
            document.getElementById('pg').value = progresso;
            setTimeout("css();", 30);
            progresso++;
        }
    }
 >   // FUNÇÃO DA BARRA HTML //

    let progresso2 = 0;
    const maximo2 = 85;

    function html() {

        if ((progresso2 + 1) < maximo2) {
            document.getElementById('pg2').value = progresso2;
            setTimeout("html();", 30);
            progresso2++;
        }
    }

>    // FUNÇÃO DA BARRA JAVASCRIPT //
    let progresso3 = 0
    const maximo3 = 70

    function javascript() {

        if ((progresso3 + 1) < maximo3) {
            document.getElementById('pg3').value = progresso3;
            setTimeout("javascript();", 30);
            progresso3++;
        }
    }

    // FUNÇÃO DA BARRA BANCO DE DADOS //
    let progresso4 = 0;
    const maximo4 = 65;

>    function bancoDados() {

        if ((progresso4 + 1) < maximo4) {
            document.getElementById('pg4').value = progresso4;
            setTimeout("bancoDados();", 30);
            progresso4++;
        }
    }

 >   // FUNÇÃO DA BARRA GitHub //
    let progresso5 = 0;
    const maximo5 = 50;

    function gitHub() {

        if ((progresso5 + 1) < maximo5) {
            document.getElementById('pg5').value = progresso5;
            setTimeout("gitHub();", 30);
            progresso5++;
        }
    }


  >      // FUNÇÃO DA BARRA WINDOWS SERVER E VIRTUALIZAÇÃO
    let progresso6 = 0;
    const maximo6 = 80;

    function server() {

        if ((progresso6 + 1) < maximo6) {
            document.getElementById('pg6').value = progresso6;
            setTimeout("server();", 30);
            progresso6++;
        }
    }

    // FUNÇÃO DA BARRA INFRAESTRUTURA E REDES //
    let progresso7 = 0;
    const maximo7 = 75;

-2

GUYS FORGET ABOUT EVERYTHING.

I WAS FLYING

WAS JUST TO DO A PARENT ROLE EXAMPLE

    function pai() {
    //botar as funções filho dentro //
    html();
    css();
    javascript();
    infra();
    }

<body onload="pai()">

and was already.

Browser other questions tagged javascript html5 css3

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