キー矢印で画像を変更する機能しません。

Question

矢印をクリックして画像を変更する機能を作成しました。 私の機能が動作していません。あなたは私にいくつかのヒントを教えてもらえますか？

あなたは以下の私のコードを見つけることができます。

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

は、あなたがあなたのスクリプトで複数の問題があり、 MEGI

Answer 1

、ありがとうございました。

• このラインdocument.onkeydown = checkKey();の端に()を削除します。あなたがそれをしたのと同じように、イベントに割り当てる代わりに関数を直接呼び出すでしょう。

• img_indexの値はこの例では定義されていないため、失敗します。最初に0に設定してください。

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