JavaScript с ошибкой индекса

Question

Когда я нажимаю кнопку «change lights», я должен дважды щелкнуть ее, чтобы изображение изменилось. Что может пойти не так? Есть идеи?

Вот мой HTML:

<p>Click the button to change to the next light.</p> 

<img id="starting_light" src="green.jpg"> 

<button type="button" onclick="nextLightClick()">Change</button> 

И мой JavaScript:

var gyr = new Array("green.jpg","yellow.jpg","red.jpg"); 

var index = 0; 
var gyrLen = gyr.length; 

function nextLightClick() { 
    if (index == gyrLen) 
     index = 0; 

    var image = document.getElementById('starting_light'); 
    image.src = gyr[index]; 

    index++; 
} 

Я подозреваю, что главная проблема будет в JavaScript, потому что, как только я начал возиться с переменными проблема была введена ,

Answer 1

При первом запуске изображение зеленое.

Затем он устанавливает изображение в gyr [0], зеленое изображение, а затем индекс увеличивается.

Вы можете либо увеличить индекс перед настройкой изображения, либо изменить порядок массива на зеленый.

Answer 2

При первом нажатии кнопки index равно 0, поэтому nextLightClick() устанавливает изображение.src на «green.jpg», что является тем же (при условии, что «1green.jpg» является опечаткой) в качестве стартового образ.

Решение направлено на отправку index++ в первую строку nextLightClick().

Answer 3

Ваш индекс по-прежнему 0 при первом входе в функцию и настройке изображения.

Переместить указатель ++; на начало функции, или инициализировать индекс дорожить 1.

var index = 1; 

Если вы хотите, чтобы инициализировать индекс 1, то вы должны переименовать переменную в нечто вроде NEXTINDEX.

Answer 4

Я не думаю, что это так. Ваш код работает корректно. Ваше первое изображение имеет зеленый цвет и первый раз при нажатии вы заменяете его с первым изображением, это причина, вы не видите никакой разницы

Вы могли бы рассмотреть возможность сделать это как

var gyr = new Array("http://i.imgur.com/eucAMTA.jpg", "http://is2.mzstatic.com/image/thumb/Purple122/v4/be/9a/f0/be9af074-90f2-5894-99a0-17460783db6c/source/1200x630bf.jpg", "https://i0.wp.com/fusion.net/wp-content/uploads/2016/05/RED.jpg?resize=1600%2C900&quality=80&strip=all"); 
 

 

 

 
var index = 0; 
 
var gyrLen = gyr.length; 
 

 
function nextLightClick() { 
 
    index++; 
 
    // alert("hello" + index); 
 
    if (index == gyrLen) 
 
    index = 0; 
 

 
    var image = document.getElementById('starting_light'); 
 
    image.src = gyr[index]; 
 

 
    
 
}

img { 
 
    width: 200px; 
 
    height: 200px; 
 
}

p>Click the button to change to the next light.</p> 
 

 
<img id="starting_light" src="http://i.imgur.com/eucAMTA.jpg"> 
 

 
<button type="button" onclick="nextLightClick()">Change</button>

Надеюсь, это поможет

Answer 5

А я, кажется, нашел ответ благодаря Заку и американцу, проблема заключалась в том, что индекс должен был быть в первой строке «nexlightclick»

Fixed скрипт ниже:

<p>Click the button to change to the next light.</p> 

<img id="starting_light" src="green.jpg"> 

<button type="button" onclick="nextLightClick()">Change lights</button> 

<script> 

var gyr = new Array("green.jpg","yellow.jpg","red.jpg"); 



var index = 0; 
var gyrLen = gyr.length; 

function nextLightClick() { 
    index++; 
    if (index == gyrLen) 
     index = 0; 

    var image = document.getElementById('starting_light'); 
    image.src = gyr[index]; 
} 

</script> 

</body> 
</html> 

Answer 6

Существует небольшая проблема с логикой index обновления. Вы должны оценить его значение, и если оно меньше gry.length, добавьте еще один повторный инициализатор в 0.

Внутренний код сценария:

var gyr = new Array("green.jpg","yellow.jpg","red.jpg"); 
var index = 0; 

function nextLightClick() { 
    index = index + 1 < gyr.length ? index + 1 : 0; 
    document.getElementById('starting_light').alt = gyr[index]; 
}