#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 как «неопределенные» «неопределенные» и значок выгруженного изображения