Элементы JSON не загружаются в DOM javascript

#javascript #arrays #json #local-storage #e-commerce

Вопрос:

Привет, ребята, я получаю ошибку каждый раз, когда пытаюсь загрузить элементы:

не определено:1 ПОЛУЧИТЬ файл:///C:/Пользователи/Администратор/Рабочий стол/JSLearn/myC3/myC3/не определено сеть::ERR_FILE_NOT_FOUND Изображение (асинхронное) addEspresso @ shopJS.js:37 onclick @ coffeeShop.html:54

Вот мой код js:

 let pList = document.getElementById("productList")
 const addEspresso = () => {
  let Espresso, esp, eObj;
  Espresso = {
    name: "Espresso",
    type: "strong",
    imgSrc: "images/c7.png"
  };

  // get the existing localStorage first
  esp = localStorage.getItem("Espresso");
  if (!esp) eObj = [];
  else eObj = JSON.parse(esp);
  // it should be an array or create one if empty
  eObj.push(Espresso)
  // add eObj to localStorage
  localStorage.setItem("Espresso", JSON.stringify(eObj));

  let espresso = "";
  eObj.forEach((item,i) => {  // item is the item, i is the index
  espresso  = `
         <div class="productDiv" data-index="${i}">
         <p>${eObj.name}</p> 
         <p>${eObj.type}</p>
         <img src="${eObj.imgSrc}">
         <button class="btn-remove">REMOVE</button>
         </div>
        `
   });
  document.getElementById("productList").innerHTML = espresso
}

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('btn-remove')) {
    // before removing, lets get the data-index value so we can remove the right one from localStorage
    let index = e.target.closest('.productDiv').dataset.index
    e.target.closest('.productDiv').remove();
    // adjust localStorage
    let eObj = JSON.parse(localStorage.getItem("Espresso"));
    eObj.splice(index,1)
    localStorage.setItem("Espresso", JSON.stringify(eObj));
  }
})
 

Мой html-код:

 <div class="iList">
     <div class="cList">
       <img src="images/c7.png"class = "Espresso">
       <h1 class="Type">Espresso</h1>
       <button id="espAdd"onclick="addEspresso()">Add Espresso</button>
     </div>
</div>
 

Элементы локального хранилища добавляются и удаляются,но DOM не хочет загружаться из-за ошибки,о которой я упоминал ранее, я думаю, что проблема в data.index.Любая помощь будет оценена по достоинству!

Комментарии:

1. Там нет элемента с идентификатором «Список продуктов». Пожалуйста, предоставьте нам код для воспроизведения вашей ошибки

2. Извините,я забыл добавить его,он определен:let pList = document.getElementById(«Список продуктов»), это не проблема, потому что элементы отображаются в DOM как «неопределенные» «неопределенные» и значок выгруженного изображения