我正在创建一个产品页面与yt教程，不幸的是代码不工作.我试图这样做，如果有人点击主照片下的照片缩略图，照片根据选项改变.我希望这是有意义的，标准的产品页面功能.不幸的是，它不工作，我试过了所有我能想到的方法。有谁知道可能出了什么问题吗？提前感谢你们的时间

let MainImg = document.getElementById("MainImg");
let smallimg = document.getElementsByClassName("small-img-col");

smallimg[0].onclick = function() {
  MainImg.src = smallimg[0].src;
};
smallimg[1].onclick = function() {
  MainImg.src = smallimg[1].src;
};
smallimg[2].onclick = function() {
  MainImg.src = smallimg[2].src;
};
smallimg[3].onclick = function() {
  MainImg.src = smallimg[3].src;
};

<section id="header">
  <a href="index.html"><img src="/logo.png" class="logo" alt="" /></a>

  <div>
    <ul id="navbar" style="list-style: none; margin: 0; padding: 0">
      <li><a class="active" href="index.html">Home</a></li>
      <li><a href="shop.html">Shop</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li id="lg-bag">
        <a href="cart.html"><i class="fi fi-rr-shopping-cart"></i></a>
      </li>

      <a href="#" id="close"><i class="fi fi-rr-cross-small"></i></a>
    </ul>
  </div>
  <div class="mobile">
    <i class="fi fi-rr-shopping-cart"><a href="cart.html"></a></i>
    <i id="bar" class="fi fi-rr-menu-burger"></i>
  </div>
</section>

<section id="prodetails" class="section-p1">
  <div class="single-pro-image">
    <img src="/f1.jpeg" width="100%" id="MainImg" alt="" />

    <div class="small-img-group">
      <div class=" small-img-col"><img src="/f1.jpeg" width="100%" /></div>
      <div class="small-img-col"><img src="/f2.jpeg" width="100%" /></div>
      <div class="small-img-col"><img src="/f3.jpeg" width="100%" /></div>
      <div class="small-img-col"><img src="/f6.jpeg" width="100%" /></div>
    </div>
  </div>
  <div class="single-pro-details">
    <h6>Home - T-shirt</h6>
    <h4>Men's Fasion</h4>
    <h2>$139.00</h2>
    <select>
      <option>Select Size</option>
      <option>S</option>
      <option>M</option>
      <option>L</option>
      <option>XL</option>
    </select>
    <input type="number" value="1" />
    <button class="normal">Add To Card</button>
    <h4>Product Details</h4>
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.</span
        >
      </div>
    </section>