This.hrefはjavascriptで常に定義されていません

Question

私は単純なギャラリーをjavascript（jQueryなし）にしたいと考えています。これは私のhtmlコード

<section> 
    <div class="gallery" align="center"> 
     <figure> 
     <p id="imgTitle">Les frères Sherlockooooooo</p> 
     <img src="../images/gallery/gal1.jpg" aligne="center" width="600" id="grande" 1px solid/> 
     </figure> 

     <article class="petite"> 
     <script> 
        for (var i=1; i<11 ; i++) 
        document.write('<a href="../images/gallery/gal'+i+'.jpg" onclick="return false;"> <img src="../images/gallery/thumbnails/gal' +i+ '_thumb.jpg" alt="gallery" class="thumbnails"></a>'); 
      </script> 
     </article> 
     <hr style="border-bottom: dotted 1px;"> </hr> 
    </div> 
    </section> 

であり、これは私が作りたいどのような私のjavascriptのコード

window.onload=pageLoaded; 

function pageLoaded() { 
    for (var i = 0; i < 11; i++) { 
    document.getElementsByClassName("thumbnails")[i].onclick=change_img; 
    } 
} 

function change_img() { 
    document.getElementById("grande").src=this.href; 
    // beyond this part is experimental 

    // end of experiment 
} 

でクリックすることにより、別の画像で（idは「グランデ」です）大きな画像を変更することですサムネイル。サムネイルの中にすでにhrefがあります。サムネイルから大きな画像のソースをhrefで変更すると大きな画像が変わることが予想されました。空白の画像だけが表示され、未定義であることが判明しました。彼の修正方法？ありがとうございます。

Answer 1

の要素は、<a>タグ内に<img>というタグがあります。 <a>タグにhref属性が含まれ、子のタグにsrc属性が含まれています。

あなたはHREFタグが必要な場合は、<a>タグにサムネイルのクラスの代わりに、子を割り当てるか、またはそれ自身のクラス名と参照あなたの関数内でそのことを割り当てるために必要があると思います。

<a href="../images/gallery/gal'+i+'.jpg" onclick="return false;"> 
    <img class="thumbnails"src="../images/gallery/thumbnails/gal' +i+ '_thumb.jpg" alt="gallery"> 
//  ^-- this tag doesn't contain a href attribute 
</a>

（コード内で何かを変更することなく）あなたの問題を解決する必要がありこれにあなたの<a>タグを改正：

//  v-- class added here instead 
<a class="thumbnails" href="../images/gallery/gal'+i+'.jpg" onclick="return false;"> 
    <img src="../images/gallery/thumbnails/gal' +i+ '_thumb.jpg" alt="gallery"> 
</a>