htmlファイルのスクリプトタグがまったく機能しない

Question

スクリプトタグをHTMLファイルに使用すると問題が発生します。たとえば、HTML、CSS、JS言語を使用してフォトギャラリーを作成したいとします。しかし、スクリプトの部分は何もしません！

これはコードですが、構文やロジックに誤りがありますか？

<script type="text/javascript"> 
 
function imgFunction(){ 
 
var bigImg = document.getElementById ("bigImg"); 
 
var smallImg= \t document.getElementById ("thumbnails"); 
 
     smallImg.addEventListener("click", function(event){ 
 
     if (event.target.tagName=="IMG"){ 
 
\t \t bigImg.src=event.target.src; 
 
\t \t 
 
\t } 
 
},false); 
 
\t 
 
} 
 
window.addEventListener("load",imgFunction,false); 
 
</script>

#gallery { 
 
width:600px; 
 
height:500px; 
 
margin:0 auto; 
 
background-color:silver; 
 
padding:10px; 
 
} 
 

 

 
#bigImg { 
 
width:600px; 
 
height:400px; 
 
margin:0 auto; 
 
background-color:white; 
 

 
} 
 

 
#bigImg img 
 

 
{ 
 
width:600px; 
 
height:400px; 
 
} 
 

 
#thumbnails { 
 
width:590; 
 
height:100px; 
 
background-color:white; 
 
margin:5px auto; 
 
padding: 5px; 
 

 
} 
 

 
#thumbnails img 
 

 
{ 
 
width:100px; 
 
height:90px; 
 
display:block; 
 
float:left; 
 
margin:7.6px; 
 
}

<h1>Photo Gallery </h1> 
 
<br> 
 

 
<div id="gallery"> 
 

 
<div id="bigImg"> 
 
<img src="../images/reception.jpg"> 
 
</div><!-- end "bigImg" --> 
 

 
<div id="thumbnails" > 
 
<img src="../images/reception.jpg"> 
 
<img src="../images/x-ray.jpg"> 
 
<img src="../images/patient_room.jpg"> 
 
<img src="../images/gym.jpg"> 
 
<img src="../images/dental_clinic.jpg"> 
 

 
</div><!-- end "thumbnails" --> 
 

 

 
</div><!-- end "gallery" -->

Answer 1

2つの問題があります。

最初に：<script>タグの中にのスクリプトを入れてはいけません。

第2：bigImg.srcを設定していますが、<div id="bigImg">があります。

idを間違った要素に入れると、画像の代わりにdivのsrc（ナンセンス）を設定しようとしています。

Answer 2

あなたのスクリプトはbigImgを指しており、Divであるため、srcを設定することはできません。代わりに、あなたはbigImg内IMGタグを取得する必要があります：

function imgFunction(){ 
 
    console.log("inside"); 
 
var bigImg = document.getElementById ("bigImg"); 
 
var smallImg= \t document.getElementById ("thumbnails"); 
 
     smallImg.addEventListener("click", function(event){ 
 
     console.log(event.target.tagName) 
 
     if (event.target.tagName=="IMG"){ 
 
     console.log(event.target.src); 
 
     var image = document.querySelector('#bigImg img'); 
 
\t \t image.src=event.target.src; 
 
\t \t 
 
\t } 
 
},false); 
 
\t 
 
} 
 
window.addEventListener("load",imgFunction,false);

#gallery { 
 
width:600px; 
 
height:500px; 
 
margin:0 auto; 
 
background-color:silver; 
 
padding:10px; 
 
} 
 

 

 
#bigImg { 
 
width:600px; 
 
height:400px; 
 
margin:0 auto; 
 
background-color:white; 
 

 
} 
 

 
#bigImg img 
 

 
{ 
 
width:600px; 
 
height:400px; 
 
} 
 

 
#thumbnails { 
 
width:590; 
 
height:100px; 
 
background-color:white; 
 
margin:5px auto; 
 
padding: 5px; 
 

 
} 
 

 
#thumbnails img 
 

 
{ 
 
width:100px; 
 
height:90px; 
 
display:block; 
 
float:left; 
 
margin:7.6px; 
 
}

<h1>Photo Gallery </h1> 
 
<br> 
 

 
<div id="gallery"> 
 

 
<div id="bigImg"> 
 
<img src="../images/reception.jpg"> 
 
</div><!-- end "bigImg" --> 
 

 
<div id="thumbnails" > 
 
<img src="../images/reception.jpg"> 
 
<img src="../images/x-ray.jpg"> 
 
<img src="../images/patient_room.jpg"> 
 
<img src="../images/gym.jpg"> 
 
<img src="../images/dental_clinic.jpg"> 
 

 
</div><!-- end "thumbnails" --> 
 

 

 
</div><!-- end "gallery" -->

Answer 3

あなたはdiv代わりのimgからsrcを設定しています。

変更bigImgContainerからdivのidまたはその他とimg

bigImgに努めスニペットの id設定：ここでは

#gallery { 
 
width:600px; 
 
height:500px; 
 
margin:0 auto; 
 
background-color:silver; 
 
padding:10px; 
 
} 
 

 

 
#bigImgContainer { 
 
width:600px; 
 
height:400px; 
 
margin:0 auto; 
 
background-color:white; 
 

 
} 
 

 
#bigImgContainer img 
 

 
{ 
 
width:600px; 
 
height:400px; 
 
} 
 

 
#thumbnails { 
 
width:590; 
 
height:100px; 
 
background-color:white; 
 
margin:5px auto; 
 
padding: 5px; 
 

 
} 
 

 
#thumbnails img 
 

 
{ 
 
width:100px; 
 
height:90px; 
 
display:block; 
 
float:left; 
 
margin:7.6px; 
 
}

<h1>Photo Gallery </h1> 
 
<br> 
 

 
<div id="gallery"> 
 

 
<div id="bigImgContainer"> 
 
<img id="bigImg" src="http://placehold.it/150?text=Img1"> 
 
</div><!-- end "bigImg" --> 
 

 
<div id="thumbnails" > 
 
<img src="http://placehold.it/150?text=Img1"> 
 
<img src="http://placehold.it/150?text=Img2"> 
 
<img src="http://placehold.it/150?text=Img3"> 
 
<img src="http://placehold.it/150?text=Img4"> 
 
<img src="http://placehold.it/150?text=Img5"> 
 

 
</div><!-- end "thumbnails" --> 
 

 

 
</div><!-- end "gallery" --> 
 

 
<script type="text/javascript"> 
 
function imgFunction(){ 
 
var bigImg = document.getElementById ("bigImg"); 
 
var smallImg= \t document.getElementById ("thumbnails"); 
 
     smallImg.addEventListener("click", function(event){ 
 
     if (event.target.tagName=="IMG"){ 
 
\t \t bigImg.src=event.target.src; 
 
\t \t 
 
\t } 
 
},false); 
 
\t 
 
} 
 
window.addEventListener("load",imgFunction,false); 
 
</script>

Answer 4

を、あなたはSRCに設定しようとしていますdiv、これは間違っています。 imgを設定する必要があります。

<script type="text/javascript"> 
 
function imgFunction(){ 
 
var bigImg = document.getElementById ("bigImg"); 
 
var smallImg= \t document.getElementById ("thumbnails"); 
 
     smallImg.addEventListener("click", function(event){ 
 
     if (event.target.tagName=="IMG"){ 
 
     document.querySelector("#bigImg img").src=event.target.src; 
 
\t } 
 
},false); 
 
\t 
 
} 
 
window.addEventListener("load",imgFunction,false); 
 
</script>

#gallery { 
 
width:600px; 
 
height:500px; 
 
margin:0 auto; 
 
background-color:silver; 
 
padding:10px; 
 
} 
 

 

 
#bigImg { 
 
width:600px; 
 
height:400px; 
 
margin:0 auto; 
 
background-color:white; 
 

 
} 
 

 
#bigImg img 
 

 
{ 
 
width:600px; 
 
height:400px; 
 
} 
 

 
#thumbnails { 
 
width:590; 
 
height:100px; 
 
background-color:white; 
 
margin:5px auto; 
 
padding: 5px; 
 

 
} 
 

 
#thumbnails img 
 

 
{ 
 
width:100px; 
 
height:90px; 
 
display:block; 
 
float:left; 
 
margin:7.6px; 
 
}

<h1>Photo Gallery </h1> 
 
<br> 
 

 
<div id="gallery"> 
 

 
<div id="bigImg"> 
 
<img src="../images/reception.jpg"> 
 
</div><!-- end "bigImg" --> 
 

 
<div id="thumbnails" > 
 
<img src="../images/reception.jpg"> 
 
<img src="../images/x-ray.jpg"> 
 
<img src="../images/patient_room.jpg"> 
 
<img src="../images/gym.jpg"> 
 
<img src="../images/dental_clinic.jpg"> 
 

 
</div><!-- end "thumbnails" --> 
 

 

 
</div><!-- end "gallery" -->