img .srcのサイクリングが「クリック」で変更されない

画像の配列を左右に移動するためにスライドショーとして動作するようになっているJavaScriptを設定しました。それは、アレイを通って一方向に進むための3つの画像と1つのボタン（青いdiv）だけです。img .srcのサイクリングが「クリック」で変更されない

私はこのコードを何度も調べて、それを分けようとしましたが、何がうまく機能しているかを見分けることはできませんでした。私は何ヶ月もこの段階で立ち往生しており、本当に助けに感謝しています。

<!DOCTYPE HTML> 
<html> 
<head> 

<style> 
#clicker { width: 200px; height:200px; background: blue; } 
#pic { width: 300px; height: 150px; } 
</style> 
</head> 

<body> 
<div id="clicker"></div> 
<img id="pic" src="models_web.jpg" alt="Icon" /> 


<script type="text/javascript"> 

var imgs = ["models_web.jpg","reflex_2.jpg","blue_web.jpg"]; 
var i = 0; 
var addl = document.getELementById("clicker"); 

function clickrotate() { 

document.getElementById("pic").src = imgs[i]; 
i++ 
if (i === 2) {i = 0}; 

} 
addl.addEventListener("click", clickrotate, false) ; 

</script> 
</body> 
</html>

出典

2016-03-20 lazyrabbit

何が助けを必要としますか？あなたの質問は何ですか？ – WillardSolutions

また、可能性があります。あなたが問題を起こしているのではなく、質問のエラーであるならば、それが読み込まれないようにします。 –

'if（i === 2）{i = 0};'あなたがそれをしたいなら 'i === 3'あなたの状態と同じように、それは決して第3のイメージをロードしません –

スクリプトに入力ミスがあります。

var addl = document.getELementById("clicker");

var addl = document.getElementById("clicker");

別のものに変更、あなたのカウンタ増分は間違っています。 2番目の画像を表示した後にリセットされるのは、をインクリメントした後にi === 2をチェックするためです。

最新のブラウザのデベロッパーツールでコンソールをチェックすると、間違ったことが表示されます。それは次回頭痛を救うでしょう。

出典

2016-03-20 19:31:46 dannyjolie

私はそこにどんなタイプミスも見ることができませんか？ – lazyrabbit

@lazyrabbitキャピタルLはタイプミスです。 – dannyjolie

十分なフェア！私はそれが不十分な質問だと知っています。 – lazyrabbit

img .srcのサイクリングが「クリック」で変更されない

答えて

関連する問題