JavaScript во внешнем файле не отображается в основном контенте - PullRequest
Новая
       15

JavaScript во внешнем файле не отображается в основном контенте

0 голосов
/ 06 июля 2019

Я кодирую динамическую карусель продукта с использованием javascript, используя основной файл и внешний js-файл, связанный с ним. Я запускаю свой код на локальном сервере MAMP и использую PHP на сайте. Когда я загружаю карусель, ни один из javascript из этого файла js не появляется.

Я пытался использовать html-теги onload и прослушиватели событий, но оба не удалось. Я использовал теги сценария и отображал содержимое в основном документе, но это также не удалось. 

//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, но ничего не появилось, и не было сообщений об ошибках консоли. Я поместил предупреждение, чтобы проверить, но оно не показывалось.

...