Tekst staje się niezdefiniowany podczas przechodzenia przez macierz.

Question

Teraz jestem nowy w programowaniu stron internetowych, w szczególności javascript. Próbuję napisać skrypt, który zaktualizuje obraz na stronie internetowej i jej tekst, gdy użytkownik kliknie obraz. Oto kod:

//Images array 
imgs = Array("test1.jpg", "test2.jpg", "test3.jpg"); 

//Names array 
names = Array("Test1", "Test2", "Test3"); 

//Holds how many times our page has been clicked 
var click = 0; 

//Another click var 
var click2 = 0; 

//change function 
function change() 
{ 

//Get the ID of 'nam', and start incrementing the elements in our array 
document.getElementById("nam").innerHTML = names[++click2]; 

//Get an element with the ID 'first', and start incrementing the elements in our  array 
document.getElementById("first").src = imgs[++click]; 

//If the user clicks to the end of the gallery 
if(click==2) 
{ 
    click = -1; 
} 

if(click2==2) 
{ 
    click = -1; 
} 

} 

Prawdopodobnie nie jest to najlepszy sposób, ale kod ten będzie działać na początku. Jednak po kliknięciu trzeciego obrazu, aby powrócić do pierwszego, zdjęcia działają poprawnie, ale tekst staje się "niezdefiniowany". Szukałem, ale nie mogę znaleźć niczego naprawdę "złego" w tym kodzie.

Każda pomoc jest doceniana.

Answer 1

literówka w nazwie var:

//If the user clicks to the end of the gallery 
if(click==2) 
{ 
    click = -1; 
} 

if(click2==2) 
{ 
    click = -1; 
} 

powinny być

//If the user clicks to the end of the gallery 
if(click==2) 
{ 
    click = -1; 
} 

if(click2==2) 
{ 
    click2 = -1; 
} 

Answer 2

jesteś przyrost ilości kliknięć i Click2 następnie jej stosowania. powinieneś zainicjować kliknięcie i kliknąć2 za pomocą -1; ponieważ kliknięcie zostało zainicjowane przez 0, nazwy [++ click2] zwrócą drugi element nie pierwszy.

var click = -1; 

//Another click var 
var click2 = -1; 

również

if(click2==2) 
{ 
    click = -1; 
} 

powinny być

if(click2==2) 
{ 
    click2 = -1; 
} 

Answer 3

Należy zapewnić, aby zadzwonić dostępne indeksom names i imgs. Po trzecim, zadzwonisz pod numer 4, a to nie jest zdefiniowane.

Można zrobić to w ten sposób:

document.getElementById("nam").innerHTML = names[(++click2)%names.length];

document.getElementById("first").src = imgs[(++click)%imgs.length];

to zachowa numery pomiędzy 0 i 2.

Rzeczy, które się dzieje: Operator % w a % b powrót reszta przy podziale a przez . Na przykład jest 5 % 2 == 1.

Answer 4

Twoje ostatnie zdanie if nie przypisuje kliknięcia2 do -1. zmień go na click2 = -1