Miganie obrazka.

pytanie zadane 30 września 2015 w JavaScript przez Krzysztof Wielgat Nowicjusz (220 p.)

<SCRIPT language="javascript" type="text/javascript">
var speed = 500;
var picNo = 0;
var pics = new Array
(
  'img/miganie1.png',
  'img/miganie2.png'
                        
);

function miganie()
{
  document.getElementById('now').src = pics[picNo++];
  if (picNo > pics.length) picNo = 0;
  setTimeout('miganie()', speed);
 
}
</SCRIPT>

</head>

<body onload="miganie();">

    <div id="mig"><img id="now" src="img/miganie1.png" onclick='miganie()'></div>

</body>

Otóż migać, miga jednak pojawia się ciągle brak obrazka w lewym górnym rogu. Jak temu zaradzić?

I przy okazji jeśli chciałbym napisać skrypt:

Sa 3 obrazki>po kliknieciu w pierwszy obrazek 1 zmienia sie na inny (reszta bez zmian)>wraca do stanu>obrazek 2 zmienia sie na inny (reszta bez zmian)>wraca do stanu> obrazek 3 zmienia sie na inny (reszta bez zmian)>zakonczenie petli.

Gdzie się kierować aby rozwiązać problem?

1 odpowiedź

odpowiedź 1 października 2015 przez Schizohatter Nałogowiec (39,600 p.)

A więc tak. Tablica Twoja ma dwa elementy, czyli te elementy posiadają indeks [0] oraz [1].

Natomiast tablica.length zwraca 2. Twój warunek picNo > pics.length powoduje, że picNo = 2 też przechodzi, bo 2 nie jest większe od 2. A indeksu [2] w tablicy nie masz.

Dalej: zawsze próbujesz pobierać wartość picNo++, czyli gdy zmienna ma już wartość 2, to Ty jeszcze ją powiększasz o 1, więc próbujesz pobrać obrazek z indeksem 3, którego też oczywiście nie ma. Dodatkowo - gdy ustawiasz zmienną na 0, to potem od razu ją powiększasz o 1, więc obrazek o indeksie [0] w ogóle nie ma prawa działać, w związku z czym działa Ci tylko obrazek drugi o indeksie [1], mam rację?

Rozumiesz problem? Musisz po pierwsze zmienić warunek, a po drugie najpierw wyświetlać, a potem zwiększać wartość.

komentarz 8 października 2015 przez Krzysztof Wielgat Nowicjusz (220 p.)

Dzięki, poprawiłem ;-))

<script>
		var time = 500;
		var picNo = 0;
		var pics = new Array
		(
		  'img/miganie1.png',
		  'img/miganie2.png'
		);

		function miganie()
		{			
		  document.getElementById('now').src = pics[picNo++];
		  if (picNo > 1) picNo =0;
			
		  
		  setTimeout('miganie()', time);
		  clearTimeout('miganie()');	 
		}
</script> 
</head> 
<body onload="miganie();">
    <img id="now"> 
</body>