insertAdjacent HTML Код Работает только в Firefox - PullRequest
Новая
       94

insertAdjacent HTML Код Работает только в Firefox

0 голосов
/ 09 мая 2020

Этот проект представляет собой небольшой мобильный сайт. Я хотел динамически обслуживать HTML для библиографии через JS. Вот код, который отлично работает в Firefox: 

let butlerBooks = [];
fetch("butler.json").then(res => {
  return res.json();
}).then(loadedButlerBooks => {
    console.log(loadedButlerBooks);
    butlerBooks = loadedButlerBooks;
    loadBooks();
}).catch(err => {
  console.error(err);
});

const biblioItem = document.getElementById('biblioCards');
function loadBooks() {
  butlerBooks.forEach(biblioCard => {
    const biblioContent = `<div id="biblioBorder" class="biblio-card-container">
        <div id="biblioTitle" class="biblio-list-item">
          <div class="biblio-date">${biblioCard.year}</div>
          <div class="biblio-booktitle">${biblioCard.title}</div>
        </div>
        <div id="biblioExpand" class="biblio-card-expand"><img src="./img/expand.png" alt="expand button"></div>
        <div class="biblio-expanded">
          <div class="biblio-expanded-top">
            <div class="biblio-subtitle">${biblioCard.subtitle}</div>
            <div id="biblioMinimize" class="biblio-minimize"><img src="./img/minimize.png" alt="minimize button"></div>
          </div>
          <div id="biblioSubcard" class="biblio-subcard">
            <p class="biblio-booksummary">${biblioCard.summary}</p>
              <a class="biblio-btn-link" href="${biblioCard.url}" target="_blank"><button id="biblioBtn" class="biblio-btn btn" type="button" name="button">View on Goodreads</button>
          </div>
        </div>
      </div>`

  biblioItem.insertAdjacentHTML('afterbegin', biblioContent);

  if (biblioCard.series === "Patternist") {
    console.log('I\'m a Patternist Book!');
    biblioBorder.style.border = "0.2em solid #434463";
    biblioBorder.style.borderLeft = "12px solid #434463";
    biblioBtn.style.backgroundColor = "#434463";
    biblioSubcard.style.background = "rgba(67, 68, 99, 0.3)";
  } else {
    biblioBorder.style.border = "0.2em solid #5EA878";
    biblioBorder.style.borderLeft = "12px solid #5EA878";
    biblioBtn.style.backgroundColor = "#5EA878";
    biblioSubcard.style.background = "rgba(94, 168, 120, 0.3)";
}

Вот как выглядит код в Firefox: Желаемый вид библиографии Вот как он выглядит в других браузерах : Разбитое представление другого браузера

Я не получаю сообщений об ошибках в Firefox, но, например, ошибка в Chrome выглядит следующим образом: 

TypeError: Cannot set property 'border' of undefined
    at main.js:48
    at Array.forEach (<anonymous>)
    at loadBooks (main.js:25)
    at main.js:18
(anonymous) @ main.js:20
Promise.catch (async)
(anonymous) @ main.js:19

I Не знаю, как это исправить. Это проблема с загрузкой? Проблема с идентификатором? Проблема для каждого l oop? Что именно мешает реализовать свойство border в других браузерах? Все JS, которые я использую, должны поддерживаться в большинстве современных браузеров (ES6, Arrow Functions, InsertAdjacent HTML и c), так что для меня это головной убор.

Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 11 мая 2020

Разобрался! Мне пришлось динамически назначать идентификаторы, чтобы каждый новый экземпляр HTML был уникальным. Вот как теперь выглядит мой проект в Chrome, Firefox и Safari: Все работает!

А вот как теперь выглядит мой код: 

function loadBooks() {
  key = 0;
  for (i = 0; i < butlerBooks.length; i++) {
    key++;
    const biblioContent = `<div id="biblioBorder${key}" class="biblio-card-container">
        <div class="biblio-list-item">
          <div class="biblio-date">${butlerBooks[i].year}</div>
          <div class="biblio-booktitle">${butlerBooks[i].title}</div>
        </div>
        <div  id="expandBtn${key}" class="biblio-card-expand"><img src="./img/expand.png" alt="expand button"></div>
        <div class="biblio-expanded">
          <div id="expandedTop${key}" class="biblio-expanded-top">
            <div class="biblio-subtitle">${butlerBooks[i].subtitle}</div>
            <div id="minimizeBtn${key}" class="biblio-minimize"><img src="./img/minimize.png" alt="minimize button"></div>
          </div>
          <div id="expandedSubcard${key}" class="biblio-subcard">
            <p class="biblio-booksummary">${butlerBooks[i].summary}</p>
              <a class="biblio-btn-link" href="${butlerBooks[i].url}" target="_blank"><button id="btn${key}" class="biblio-btn btn" type="button" name="button">View on Goodreads</button>
          </div>
        </div>
      </div>`

  biblioItem.insertAdjacentHTML('beforeEnd', biblioContent);



const expandedTop = document.getElementById(`expandedTop${key}`);
const expandedSubcard = document.getElementById(`expandedSubcard${key}`);
const expandBtn = document.getElementById(`expandBtn${key}`);
const minimizeBtn = document.getElementById(`minimizeBtn${key}`);

      expandBtn.onclick = () => {
        expandedTop.style.display = "flex";
        expandedSubcard.style.display = "block";
        expandBtn.style.display = "none";
      };

      minimizeBtn.onclick = () => {
        expandedTop.style.display = "none";
        expandedSubcard.style.display = "none";
        expandBtn.style.display = "inline-flex";
      }
   }
};

Спасибо CertainPerformance за ваш ответ! Это помогло мне задать вопрос «как сделать идентификаторы уникальными с помощью Javascript», что в конечном итоге привело к решению.

...