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

有兩個問題。

第一：你不能把<script>標籤裏面的一個腳本。

第二：您正在設置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

要設置src到div而不是img。

變化div的id到bigImgContainer或任何其他與設置的imgid到bigImg

工作片段：

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