ギャラリーの画像を表示するにはJavaScriptを使用してクリックしてください

Question

私はJavascriptを習得しようとしていますが、ユーザーがギャラリー内の画像をクリックする（画像は卵巣になる）スクリプトを作成したいと思います。ページの中心に集中しています。私の目標は、スクリプトがページ上のすべての画像をループし、フォーカスされた画像のソースがクリック時にクリックされた画像のソースに変わるように各画像に機能を割り当てることでした。私は失敗しました。

マイ関連するHTMLコードは次のとおりです。

 <div class="gallery"> 
     <img src= "otter1.png")/> 
     <img src= "otter2.png")/> 
     <img src= "otter3.png")/> 
     <img src= "otter4.png")/> 
     <img src= "otter5.png")/> 
     <img src= "otter6.png")/> 
     </div> 

    <div class="focus"> 
     <img id="focus" src="otter1.png"> 
    </div> 

関連するCSSコード：

.gallery { 
    margin: 5px; 
    border: 1px solid #ccc; 
    float: left; 
    width: 180px; 
} 

.gallery img:hover { 
    border: 1px solid #777; 

} 


.gallery img { 
    width: 100%; 
    height: auto; 
} 

.focus { 
    position: fixed; 
    text-align: center; 
    vertical-align: center; 
    margin-left: 50px; 
    margin-top: 100px; 
    border: 4px solid white; 
} 

そして、最も重要なのjavascript：

window.onload = function() { 
    var imgs = document.getElementsByTagName('img'); 
    for(var i = 0; i < imgs.length; i++) { 
     var img = imgs[i]; 
     img.onclick = function() { 
      newSrc = img.getAttribute('src'); /* problem line ?*/ 
      focus = document.getElementById('focus'); 
      focus.src = 'newSrc'; 
     } 
    } 
} 

（もし私の機能に間違っ起こっています問題は機能だけです）、どうすればそれを動作させることができますか？私は、コンソールで関数のアクティビティを記録しようとしましたが、正確に何が起こっているかについてはまだ混乱しています。

私は見てみました：How do you set a JavaScript onclick event to a class with cssとhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulbでしたが、いずれの方法も適切に適用できませんでした。

これが不明または長すぎる場合は、これが私の最初の投稿です。

Answer 1

本当の問題は、あなたの一時的なimgは、常に時間onclickで最後の画像が含まれているということですが、匿名関数は（あなたがonclickを処理するために使用したもの）をリアルタイムで変数をつかむしないので、彼らは時に変数をつかむ、解雇されますそれらが呼び出されます。

あなたは、現在のイメージをつかむためのonclickイベント内thisキーワードを使用することができます。

window.onload = function() { 
    var imgs = document.getElementsByTagName('img'); 
    for(var i = 0; i < imgs.length; i++) { 
     var img = imgs[i]; 
     img.onclick = function() { 
      newSrc = this.src; //this = reference to image that fired onclick 
      focus = document.getElementById('focus'); 
      focus.src = newSrc; //no quotes for variable references! 
     } 
    } 
} 

は、この情報がお役に立てば幸い！

Answer 2

あなたがこの方法をコーディングすることができます

window.onload = function() { 
    document.getElementsByTagName('img').forEach(function(){ 
     this.onclick = function() { 
      document.getElementById('focus').src = this.src; 
     } 
    }); 
} 

私はコードが直感的であると思いますが、お気軽に。