通过按键箭头更改图像不起作用。

Question

I created function to change images by clickiking arrows. My functions is not working. Can you give me some hints?

You can find my code below:

 var imgs = [ "assets/1.jpg", "assets/2.jpg", "assets/3.jpg", "assets/4.jpg", "assets/5.jpg", "assets/6.jpg", "assets/7.jpg" ]; function changeImage() { var img = document.getElementById("images"); img_index = ++img_index % 7; img.src = imgs[img_index]; } function checkKey(e) { e = e || window.event; if (e.keyCode == '37') { // left arrow changeImage(); } else if (e.keyCode == '39') { // right arrow changeImage(); } } // document.onkeydown = checkKey(); 

 <img id="images" src="assets/1.jpg" /> 

Thank you, Megi

Answer 1

You have multiple problems with your script.

• Remove the () on the end of this line document.onkeydown = checkKey(); . Like you did it you will directly call the function instead of assignin it to the event.

• The img_index value is not defined in your example and therefore it fails. You could just set it to 0 at the start.

 var img_index = 0; var imgs = [ "assets/1.jpg", "assets/2.jpg", "assets/3.jpg", "assets/4.jpg", "assets/5.jpg", "assets/6.jpg", "assets/7.jpg" ]; function changeImage() { var img = document.getElementById("images"); img_index = ++img_index % 7; img.src = imgs[img_index]; } function checkKey(e) { e = e || window.event; if (e.keyCode == '37') { // left arrow changeImage(); } else if (e.keyCode == '39') { // right arrow changeImage(); } } document.onkeydown = checkKey; 

 <img id="images" src="assets/1.jpg" />