Nie działa skrypt zmieniający zdjęcie co parę sekund

pytanie zadane 20 lipca 2022 w JavaScript przez lukas1231233 Nowicjusz (200 p.)
zamknięte 20 lipca 2022 przez lukas1231233

<script type="text/javascript">
var obrazki = new Array();
obrazki[1] = "images/1.2.jpg";
obrazki[2] = "images/2.2.jpg";
var sekund = 1; //co ile sekund ma sie zmieniac obrazek
 
var a = 1;
 
function zmien()
{
    var ile = obrazki.length;
    document.getElementById("obrazek").src = obrazki[a];    
    a++;
    if(ile==a) {
        a=1;
    } 
 
}
 
 
setInterval("zmien()", sekund*1000);
 
</script>

Dlaczego nie działa mi skrypt? Ściślej mówiąc działał był gotowy, aby wstawić na stronę internetową. Wstawiłem go patrzę nie działa próbuję otworzyć w innym pliku tekstowym html, oddzielnie jako plik JS podpiąć do <head></head>. Bardzo proszę o szybką odpowiedź. Pilne!

komentarz zamknięcia: Dziekuję za odpowiedzi! Problem rozwiązany.

2 odpowiedzi

odpowiedź 20 lipca 2022 przez VBService Ekspert (252,660 p.)
edycja 20 lipca 2022 przez VBService

Problem może "wywoływać" linia 12

<script type="text/javascript">
var obrazki = new Array();
obrazki[1] = "images/1.2.jpg";
obrazki[2] = "images/2.2.jpg";
var sekund = 1; //co ile sekund ma sie zmieniac obrazek
  
var a = 1;
  
function zmien()
{
    var ile = obrazki.length;
    document.getElementById("obrazek").src = obrazki[a];    
    a++;
    if(ile==a) {
        a=1;
    } 
  
}
  
  
setInterval("zmien()", sekund*1000);
  
</script>

ponieważ jak napisałeś

oddzielnie jako plik JS podpiąć do <head>

spowodowane jest to tym, że kod js-a uruchamia się szybciej niż element html o id obrazek "pojawia" się w DOM Twojej strony. Kod sekcji head jest szybciej renderowany niż body

[ EDIT ]

W samej funkcji zmieniaj tylko indeks obrazka z tablicy z obrazkami.

a setInterval "wywołaj" np. z onload strony.

propozycja zmian

const obrazki = [
  'images/1.2.jpg', // obrazki[0]
  'images/2.2.jpg'  // obrazki[1]
];

const obrazki_ile = obrazki.length;
const sekund = 1000;
let obrazek_index = 0;

function zmienObrazek()
{
  document.getElementById("obrazek").src = obrazki[obrazek_index];    
  obrazek_index = (obrazek_index == obrazki_ile - 1) ? 0 : obrazek_index + 1;
}  

window.onload = load;

function load() {
  setInterval(zmienObrazek, sekund);
}

P.S.

const obrazki = [
  '',               // obrazki[0]
  'images/1.2.jpg', // obrazki[1]
  'images/2.2.jpg'  // obrazki[2]
];

komentarz 20 lipca 2022 przez Wiciorny Ekspert (269,590 p.)

ale ma interwał, więc tak czy siak potem skrypt wywołuje funkcje :) co określony czas, moim zdaniem problem tez bedzie z indeksowaniem tablicy.

komentarz 20 lipca 2022 przez VBService Ekspert (252,660 p.)

Pierwsze wywołanie jest po sekundzie

setInterval("zmien()", sekund*1000);

co może okazać się nie wystarczające przy sieci, w której ta strona wczytuje się nieco wolniej.

komentarz 20 lipca 2022 przez Wiciorny Ekspert (269,590 p.)

generalnie pierwsz załadowanie okej, ale skrypt załadowany jest raz, interwal co 1 sekunde, wiec generalnie powtarzalność funkcji będzie wywoływana*

komentarz 20 lipca 2022 przez VBService Ekspert (252,660 p.)
edycja 20 lipca 2022 przez VBService

@lukas1231233, patrz EDIT powyżej.

komentarz 20 lipca 2022 przez Wiciorny Ekspert (269,590 p.)

okej, ale dalej nie odp. na moje pytanie, nie chodzi mi o poprawność autora implementacji i błędów tylko faktu, że w skrypcie jest interwał, więc o ile 1 wywołanie nie zadziała - okej bo jak wspomniałeś DOM nie jest jeszcze gotowy to skrypt juz jest zaladowany oraz dom także, więc kolejne wywołania powinny funkcjonować, czy nie? :)

Też nie podważam twojej implementacji, żeby nie o to chodziło tylko o sam fakt w/w problemu przeze mnie poruszonego :)

komentarz 20 lipca 2022 przez VBService Ekspert (252,660 p.)
edycja 20 lipca 2022 przez VBService

Nie wiadomo do końca co miał na myśli OP, pisząc

Wstawiłem go patrzę nie działa próbuję otworzyć w innym pliku

bo np. rzucało Mu w konsoli (pierwsze lub nawet drugie wywołanie setInterval)

Uncaught TypeError: Cannot set properties of null (setting 'src')

dopiero po tym jak DOM jest załadowany działa już poprawnie kolejne "wywołanie" setInterval.

IMO, jeżeli w kodzie js-a używamy odwołanie do elementów na stronie lepiej jest to wywołanie umieścić choćby np. w onload.

komentarz 20 lipca 2022 przez Wiciorny Ekspert (269,590 p.)

co do rozwiązania to tak, zgadzam się, z drugiej strony skrypty jeśli już umieszczane w html, to zwykle widywałem w starych technologiach na końcu ładowane i też funkcyjnie z innego pliku, albo ładowane jakimś eventem/handlerem

odpowiedź 20 lipca 2022 przez Wiciorny Ekspert (269,590 p.)

function zmien()
{
    var ile = obrazki.length; // jestem ustawiony na 2 
    document.getElementById("obrazek").src = obrazki[a];    // a[1] istnieje, ale nie
    // odwolujesz sie do obrazki[0] - a obrazki[2] nie istnieje 
    a++; // tu jestem na 2 
    if(ile==a) { // prawda 2=2
        a=1; // wiec ustaw na 1 
    } 

}

twoja zmienna var =1 potem robisz inkrementacje więc aktualnie var a = 2 więc jest równe ile, potem ustawiasz var =1, i robisz to samo ... znowu
ile jest dlugoscia 2, zwiekszasz a do 2, ale uwczesnie a- zawsze jest resetowane do 1, stad wyswietla
obrazki[a]; => a to jest tablica jeśli tablica ma 2 elementy to nie istnieje tablica[2] ... bo indeksowanie jest od zera

komentarz 20 lipca 2022 przez VBService Ekspert (252,660 p.)
edycja 20 lipca 2022 przez VBService

var ile = obrazki.length; // jestem ustawiony na 2

na pewno?

przy zapisie jaki zaprezentował OP

var obrazki = new Array();
obrazki[1] = "images/1.2.jpg";
obrazki[2] = "images/2.2.jpg";

sprawdź

var obrazki = new Array();
obrazki[1] = "images/1.2.jpg";
obrazki[2] = "images/2.2.jpg";

console.log(obrazki.length);

function zmien()
{
    var ile = obrazki.length; // jestem ustawiony na 2 
    document.getElementById("obrazek").src = obrazki[a];    // a[1] istnieje, ale nie
    // odwolujesz sie do obrazki[0] - a obrazki[2] nie istnieje 
    a++; // tu jestem na 2 
    if(ile==a) { // prawda 2=2
        a=1; // wiec ustaw na 1 
    } 
 
}

to chyba obrazki[0] "nie istnieje" tzn. domyślnie jest "ustawiony" undefined

var obrazki = new Array();
obrazki[1] = "images/1.2.jpg";
obrazki[2] = "images/2.2.jpg";

console.log(obrazki.length);
console.info(obrazki[0], typeof obrazki[0]);

kod OP działa: https://jsfiddle.net/Lsfvuc9b/