html文件中的脚本标记根本不起作用

Question

我在任何HTML文件中使用脚本标记时遇到问题，例如我想使用HTML，CSS和JS语言进行照片库。但是脚本部分没有做任何事情！

这是代码，有任何语法或逻辑错误！

<script type="text/javascript"> 
function imgFunction(){
var bigImg = document.getElementById ("bigImg");
var smallImg=	document.getElementById ("thumbnails");
       smallImg.addEventListener("click", function(event){
       if (event.target.tagName=="IMG"){
		bigImg.src=event.target.src;
		
	}
},false);
	
}
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。相反，您需要在IMG中获取bigImg标记：

function imgFunction(){
  console.log("inside");
var bigImg = document.getElementById ("bigImg");
var smallImg=	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');
		image.src=event.target.src;
		
	}
},false);
	
}
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。

将id的{​​{1}}更改为div或其他任何内容，并将bigImgContainer id设置为img

工作片段：

＆＃13;

＆＃13;

bigImg

＆＃13;

#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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

在这里，你试图在div上设置src，这是不正确的。 你需要设置img。

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;