because I get the error "Uncaught ReferenceError: slider1 is not defined at onload"

1

I can not understand why I get the error I mention in the title "index.php: 111 Uncaught ReferenceError: slider1 is not defined     at onload " If someone very kind could help me,

function uhrzeit(anzeige) {
            Heute = new Date();
            Stunde  = Heute.getHours();
            Minute  = Heute.getMinutes();
            Sekunde = Heute.getSeconds();
            document.getElementById("uhr").innerHTML=Stunde+":"+((Minute<=9)?"0"+Minute:Minute)+":"+((Sekunde<=9)?"0"+Sekunde:Sekunde)+" Uhr";
        }
        function bild1(){
            document.getElementById("bild").style.backgroundImage = "url('images/slider/bild1.png')";
            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkton.png')";
            document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')";
        }
        function bild2(){
            document.getElementById("bild").style.backgroundImage = "url('images/slider/bild2.png')";
            document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkton.png')";
            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')"
        }
        function bild3(){
            document.getElementById("bild").style.backgroundImage = "url('images/slider/bild3.png')";
            document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkton.png')";
            document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')"
        }
        function bild4(){
            document.getElementById("bild").style.backgroundImage = "url('images/slider/bild4.png')";
            document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkton.png')";
            document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')"
        }
        position=1;
        setTimeout(function slider1(){
            if(position == 1){
                position = 2;
                document.getElementById("bild").style.backgroundImage = "url('images/slider/bild1.png')";
                document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkton.png')";
                document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
                document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
                document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')";
                window.setTimeout(slider1, 5000);
            }
            else{
                if(position == 2){
                    position = 3;
                    document.getElementById("bild").style.backgroundImage = "url('images/slider/bild2.png')";
                    document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkton.png')";
                    document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')";
                    document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
                    document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')"
                    window.setTimeout(slider1, 5000);
                }
                else{
                    if(position == 3){
                        position = 4;
                        document.getElementById("bild").style.backgroundImage = "url('images/slider/bild3.png')";
                        document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkton.png')";
                        document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
                        document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')";
                        document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')"
                        window.setTimeout(slider1, 5000);
                    }
                    else{
                        if(position == 4){
                            position = 1;
                            document.getElementById("bild").style.backgroundImage = "url('images/slider/bild4.png')";
                            document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkton.png')";
                            document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
                            document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
                            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')"
                            window.setTimeout(slider1, 5000);
                        }
                    }                       
                }
            }
        },5000);

<body Onload="uhrzeit('jetzt'); setInterval('uhrzeit()', 1000); bild1(); slider1()">
    
asked by crt 18.10.2018 в 03:28
source

2 answers

1

the function slider1 as such is not defined. It is within the scope of settimeout, so you can not access it from outside. I think the correct thing would be to define it outside:

function slider1(){
    if(position == 1){
        position = 2;
        document.getElementById("bild").style.backgroundImage = "url('images/slider/bild1.png')";
        document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkton.png')";
        document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
        document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
        document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')";
        window.setTimeout(slider1, 5000);
    } else {
                    if(position == 2){
                        position = 3;
                        document.getElementById("bild").style.backgroundImage = "url('images/slider/bild2.png')";
                        document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkton.png')";
                        document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')";
                        document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
                        document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')"
                        window.setTimeout(slider1, 5000);
                    }
                    else{
                        if(position == 3){
                            position = 4;
                            document.getElementById("bild").style.backgroundImage = "url('images/slider/bild3.png')";
                            document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkton.png')";
                            document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
                            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')";
                            document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkt.png')"
                            window.setTimeout(slider1, 5000);
                        }
                        else{
                            if(position == 4){
                                position = 1;
                                document.getElementById("bild").style.backgroundImage = "url('images/slider/bild4.png')";
                                document.getElementById("bild4").style.backgroundImage = "url('images/slider/punkton.png')";
                                document.getElementById("bild2").style.backgroundImage = "url('images/slider/punkt.png')";
                                document.getElementById("bild3").style.backgroundImage = "url('images/slider/punkt.png')";
                            document.getElementById("bild1").style.backgroundImage = "url('images/slider/punkt.png')"
                    window.setTimeout(slider1, 5000);
                }
            }                       
        }
    }
}

position = 1;
setTimeout(slider1, 50000);

In this way, now slider1 is defined, and when you call the load of your element (as long as you have put this javascript before in the head)

On the other hand, that slider1 function can be optimized enough. I suggest you review it and put a switch instead of nested if, you always do the same in each if, just changing values, so you could play with an object with keys bild, bild1, bild2, bild3, bild4 and values punkton, bulk ... to go assigning your blackgroundImages. I'll leave that to you:)

    
answered by 18.10.2018 / 07:39
source
3

Javascript, once again, has interesting peculiarities. In this case you have run into one of them: inline functions with a name.

The name in this scenario only serves for recursive calls, outside of that context the function is considered anonymous.

Your slider1 function is not visible with that name outside the setTimeout where it is defined.

setTimeout(function nombreFuncion (n) {
  if (n==0) {
    console.log('Fin');
  } else {
    console.log(n);
    nombreFuncion(n-1);
  }
},0,5);


nombreFuncion(5);

The solution is to declare it out in order to reuse it.

    
answered by 18.10.2018 в 07:57