javascript - 图片库使用 php css 和 javascript

Question

我正在尝试创建一个简单的图片库。我正在关注 youtube 上的教程。我很确定我很好地遵循了它。但是，我不确定为什么它不起作用。似乎是 javascript 引起了问题，因为我每次都保存并检查它。但是当我添加代码时，当你点击缩略图时，它会用大图像切换图像。这是我的代码

PHP

    <div id="gHolder">
        <div id="theBigImageHolder">
            <img src="http://2.media.dorkly.cvcdn.com/24/85/a2d9c425cf32934dbe8648be5a453042.jpg"
 id="BigImage">
        </div>
        <div id="thumbnailsHolder">
            <img src="http://2.media.dorkly.cvcdn.com/24/85/a2d9c425cf32934dbe8648be5a453042.jpg">
            <img src="https://i.kinja-img.com/gawker-media/image/upload/s--aTCcDbn_--/c_fill,fl_progressive,g_center,h_900,q_80,w_1600/1503194806639950221.png">
            <img src="https://i.imgur.com/i7VBIz3.jpg">
            <img src="https://i.ytimg.com/vi/FaFrYdoD6XY/maxresdefault.jpg">
            <img src="http://assets1.ignimgs.com/2017/06/07/13313349-10154255755436457-483416867-o-1496868408304_1280w.jpg">
        </div>
      </div>

CSS

#gHolder{
      width: 600px;
      height: 500px;
      margin: 0 auto;
      background-color: silver;
      padding: 10px;
    }
#theBigImageHolder{
      width: 600px;
      height: 400px;
      background-color: white;
    }
#thumbnailsHolder{
      width: 590px;
      height: 90px;
      background-color: white;
      margin: 2px auto;
      padding: 5px;
    }
#theBigImageHolder > img{
      width: 600px;
      height: 400px;
    }
#thumbnailsHolder > img{
      width: 90px;
      height: 90px;
      display: block;
      float: left;
      margin: 2px;
      transition: border-radius 0.3s linear 0s;
    }
#thumbnailsHolder > img:hover{
      border-radius: 100px;
      cursor: pointer;
    }

Javascript

 function imgFunc(){
          var bigImage = document.getElementById("bigImage");
          var thumbnailsHolder = document.getElementById("thumbnailsHolder");

 thumbnailsHolder.addEventListener("click",function(event){
            if (event.target.tagName == "IMG") {
              bigImage.src = event.tagName.src;
            }
          }, false);
      }
      window.addEventListener("load",imgFunc,false);

你们知道我在 javascript 中哪里编码不正确吗？十分感谢这是预览。 https://codepen.io/UmaruHime/pen/JryvyP

Answer 1

Id 错误，应该是

document.getElementById("BigImage");

第二个错误

 if (event.target.tagName == "IMG") {
   bigImage.src = event.target.src; //instead of bigImage.src = event.tagName.src;
 }

Fiddle