Image Gallery Using php css and javascript

Question

I am trying to create a simple image gallery. I was following a tutorial on youtube. I am pretty sure i followed it well. However, I wasn't sure why it won't work. It seems that the javascript was causing the problem because i always save and check it every time. But when I added the code where when you click on a thumbnail image, it will switch images with the big Image. here are my codes

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);

Do you guys know where in javascript i coded incorrectly? Big Thanks here is a preview. https://codepen.io/UmaruHime/pen/JryvyP

Answer 1

Error in Id , it should be

document.getElementById("BigImage");

And second error

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

Fiddle