• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
449 wizyt
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

0 głosów
odpowiedź 20 lipca 2022 przez VBService Ekspert (251,210 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.

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,120 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 (251,210 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,120 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 (251,210 p.)
edycja 20 lipca 2022 przez VBService

@lukas1231233, patrz EDIT powyżej.

komentarz 20 lipca 2022 przez Wiciorny Ekspert (269,120 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 :)
1
komentarz 20 lipca 2022 przez VBService Ekspert (251,210 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,120 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
0 głosów
odpowiedź 20 lipca 2022 przez Wiciorny Ekspert (269,120 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 (251,210 p.)
edycja 20 lipca 2022 przez VBService
var ile = obrazki.length; // jestem ustawiony na 2 

na pewno? wink

przy zapisie jaki zaprezentował OP

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

 

sprawdź wink 

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/ 

Podobne pytania

0 głosów
0 odpowiedzi 80 wizyt
pytanie zadane 23 maja 2019 w Sieci komputerowe, internet przez Norciu Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 276 wizyt
pytanie zadane 19 stycznia 2017 w JavaScript przez matilogias Obywatel (1,550 p.)
0 głosów
2 odpowiedzi 1,236 wizyt
pytanie zadane 29 listopada 2015 w PHP przez No Lime Gaduła (4,540 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...