外部文件中的JavaScript没有出现在主要内容中

Question

我正在使用javascript使用主文件和与其链接的外部js文件对动态产品轮播进行编码。我在本地MAMP服务器上运行代码，并在站点中使用PHP。当我加载轮播时，此js文件中的所有javascript都不会显示。

我尝试使用onload html标签和事件侦听器，但是都失败了。我使用了脚本标记并在主文档中显示了内容，但这也失败了。

//featured products carousel
class Card {
  constructor(photo, title, price) {
    this.photo = photo;
    this.title = title;
    this.price = price;
  }
}
let featuredProducts = [
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00),
  new Card("none", "product", 0.00)
];

//this event listener won't work
document.addEventListener("load", responsiveCarousel());

function responsiveCarousel() {

  alert("success");
  let cardsPerSlide = 6;
  if(window.innerWidth <= 1080 && window.innerWidth > 910) {
    cardsPerSlide = 5;
  } elseif(window.innerWidth <= 910 && window.innerWidth > 740) {
    cardsPerSlide = 4;
  } else {
    cardsPerSlide = 0;
  }

  let featuredCarousel = document.getElementById("featured-products-carousel-inner");
  let carouselHTML = '<div class="carousel-item active">';
  let count = 0;

  for(int s = 0; s < 3; s++) {
    if(s != 0) {
      carouselHTML += '<div class="carousel-item">';
    }
    carouselHTML += '<div class="row">';
    for(int i = 0; i < cardsPerSlide; i++) {
      let card = featuredProducts[count];
      count++;
      carouselHTML += '<div class="col">';
      carouselHTML += '<div class="card">';
      carouselHTML += '<img class="card-img-top" src="' + card.photo + '" alt="No Photo Yet"/>';
      carouselHTML += '<div class="card-body">';
      carouselHTML += '<h4 class="card-title">' + card.title + '</h4>';
      carouselHTML += '<p class="card-text price">$' + card.price + '</p>';
      carouselHTML += '<a href="#" class="btn btn-primary">Add to Cart</a>'
      carouselHTML += '</div>';
      carouselHTML += '</div>';
      carouselHTML += '</div>';
    }
    carouselHTML += '</div>';
    carouselHTML += '</div>';
  }
  featuredCarousel.innerHTML = carouselHTML;
}

我希望我的轮播会出现在此javascript中，但没有显示任何内容，也没有控制台错误消息。我放了一条警报消息进行检查，但它没有显示。