JavaScript with index error

The first time you click the button, index is equal to 0, so nextLightClick() is setting image.src to "green.jpg", which is the same (assuming "1green.jpg" is a typo) as the starting image.

The solution is to move index++ to the first line of nextLightClick().

Your index is still 0 on the first time you enter the function and set the image.

Move the index++; to the start of the function, or initialize the index to value 1.

var index = 1;

If you want to initialize the index to 1, then you should rename the variable to something like nextIndex.

I don't think it is the case. Your code is working correctly. Your first image is green and the first time you click you are replacing it with the first image, that's the reason you don't see any difference.

You might consider doing it as:

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>

Ah I seem to have found the answer thanks to Zac and American the problem was that index should have been at the first line of 'nexlightclick'

Fixed script below:

<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>

There is a little problem with index update logic. You must evaluate its value and if it's less than gry.length add one else reinitialize to 0.

The inside script code:

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];
}