Блог

У меня есть 2 шаблона js для создания контента на моей веб-странице.

Теперь первый шаблон получает массив из файла JSON (см. Также #Load JSON#) и загружает содержимое. (смотрите также #1 #)

второй загружается непосредственно из js. (см. также #2 #)

Проблема в том, что # 2 # работает само по себе, но вместе они не хотят работать, и я не знаю почему.

#Загрузить JSON#

 const lister = document.getElementById("lister");
const buyTickets = document.getElementById("buyTickets");
fetch('../Backend/events.json').then(function(response) {
  // The API call was successful!
  if (response.ok) {
    return response.json();
  } else {
    return Promise.reject(response);
  }
}).then(function(data) {
  if (lister) {
    lister.innerHTML = `${data.map(importEventInfo).join("")}`;
  }
  if (buyTickets) {
    buyTickets.innerHTML = `
      ${data.map(importTickets).join("")}`;
  }
}).catch(function(err) {
  // There was an error
  console.warn('Something went wrong.', err);
});
  

#1#

 importTickets = function(tickets) {
  return (
    `<div class="tickets ${tickets.class} expandet">
      <div class="tickets__item--genre">
        <div class="tickets__item--headerwrapp">
          <img class="tickets__item--festivalpic" src="${tickets.image}">
          <div class="tickets__item--header ">
            <div class="tickets__item--headderpic">
            </div>
          </div>
        </div>
        <h2 class="tickets__item--title">${tickets.title}</h2>
        <div class="tickets__item--availability">Verfügbare Tickets
          <span class="tickets__item--counter">${tickets.availableTickets}</span> /
          <span class="tickets__item--max">${tickets.totalTickets}</span>
          <div class="tickets__item--graficalavailability">
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
            <div class="tickets__item--tenth "></div>
          </div>
        </div>
        <div class="tickets__item--btnwrap">
          <button class="blackbtn">KAUFEN</button>
        </div>
      </div>
    </div>`
  )
}
  

#2#

 buyTickets.addEventListener("load", function() {
  document.getElementById("buyTickets").innerHTML.afterPageload = ` 
    <div class="marked">  
      <h2>Gemerkte Festivals</h2>
    </div>
    <div class="unmarked">
      <h2>Alle Festivals</h2>
    </div>`
})