Javascript Изменение изображения onClick

Question

Я создаю изображение, которое изменяется при нажатии. Мой код не работает, что с ним не так?

<div id="img"></div> 
<script> 
var fNames = ["SD1", "SD2", "SD3", "SD4"]; //File names 
var _img = document.getElementById("img"); //Grabs images, groups them 
var imgIdx = 0; 
_img.style.position = "relative"; 
_img.style.left = "auto"; 
_img.style.right = "auto"; 
_img.style.width = "1920"; 
_img.style.height = "1280"; 
_img.style.backgroundImage = "url('images/"+fNames[imgIdx]+".jpg')";  //Retrieves images from file 
_img.addEventListener("click", onImageClick); //Allows image click 

function onImageClick() { 
    imgIdx++; 
    if(imgIdx == 6) { 
     imgIdx = 0; 
    }  
_img.style.backgroundImage = "url('images/"+fNames[imgIdx]+".jpg')"; 
} 
</script> 

Answer 1

Вам нужен прибор, когда вы указываете размер:

_img.style.width = "1920px"; 
_img.style.height = "1280px"; 

При создании индекса обертку вокруг вы используете 6, но это должно быть 5. Еще лучше использовать длину массива, поэтому вам не нужно изменять эту часть кода, если изменяется массив:

if(imgIdx > fNames.length) { 
    imgIdx = 0; 
}