Kod timera nie wyświetla obrazów

pytanie zadane 5 września 2017 w JavaScript przez kptpiotr Początkujący (330 p.)

Witam

Uczę się JS od niedawna. Piszę prosty slider, który powinien pokazywać zdjęcia i je zmieniać po upływie 5 sekund. Czy moglibyście zobaczyć co jest nie tak z moim kodem? Kolor tła fajnie się ustawia, lecz nie widać żadnych zdjęć...

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>slajdy</title>
    <style>
        body
        {
            background-color:darkcyan;
        }
    </style>
    
    <script>
    
        function slajd(numer)
        {

            if (numer>5)
                {
                    numer = 1;
                }
            var plik = "<img src=\"slajd"+numer+".png\"/>";
            document.getElementById(slajder).innerHTML = plik;
            numer++;
            setTimeout("slajd(numer+1)", 5000);
            
        }
        

    </script>
</head>
<body onload="slajd(1)">

    <div id="slajder"></div>
    
</body>
</html>

2 odpowiedzi

odpowiedź 5 września 2017 przez jankowa1ski Gaduła (3,560 p.)

Najlepsza

document.getElementById(slajder).innerHTML

powinno być:

document.getElementById('slajder').innerHTML

zapomniales o ""

aha no i ten zapis:

setTimeout("slajd(numer+1)", 5000); tez chyba nie zadziała

komentarz 5 września 2017 przez kptpiotr Początkujący (330 p.)
przywrócone 5 września 2017 przez kptpiotr

Prosta rzecz a cieszy :D Dzięki

komentarz 5 września 2017 przez kptpiotr Początkujący (330 p.)

Właśnie nie chce zmieniać obrazków... kiedy zmamiast "numer+1" wstawiam jakąś liczbę, np 5 to zmienia obrazek. Mogę w jakiś sposób wywołać funkcję z argumentem "numer"?

komentarz 5 września 2017 przez jankowa1ski Gaduła (3,560 p.)

Po prosu gdy numer jest wewnątrz cudzysłowów to jest traktowany jako tekst a nie zmienna

spróbuj

setTimeout(slajd(numer+1), 5000);

komentarz 5 września 2017 przez kptpiotr Początkujący (330 p.)

Próbowałem, nadal nic. Co ciekawe slider wariuje i wyświetla cały czas inne zdjęcie niż to podane w argumencie, na dodatek nie zmienia...

komentarz 5 września 2017 przez jankowa1ski Gaduła (3,560 p.)

Wydje mi sie że setTimeout powinienes dac poza ta funkcje

odpowiedź 5 września 2017 przez kptpiotr Początkujący (330 p.)

Napisałem kod od nowa, jakby ktoś potrzebował w przyszłości

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>slajdy</title>
    <style>
        body
        {
            background-color:darkcyan;
        }
    </style>
    
    <script>
    
   var zmienna = 1;
    
        function licznik()
        {
            if (zmienna >5)
                {
                    zmienna = 1;
                }
            pokazslajd();
            zmienna++;
        }
        
        function pokazslajd()
        {
            var plik = "<img src=\"slajd" + zmienna + ".png\" />";
            document.getElementById("slajder").innerHTML = plik;
            setTimeout("licznik()",2000);
        }
        

    </script>
</head>
<body onload="licznik()">

    <div id="slajder"></div>
    
</body>
</html>

to wklejam :)