我在添加商品后从购物车中删除商品时遇到问题。错误为：未捕获类型错误：无法读取null的属性'addEventListener'下面是我的脚本：
const addEspresso = () =>{
var Espresso, esp, eObj;
Espresso = {
name : "Espresso",
type : "strong",
imgSrc : "images/c7.png"
};
localStorage.setItem("Espresso", JSON.stringify(Espresso));
esp = localStorage.getItem("Espresso");
eObj = JSON.parse(esp);
let espresso = "";
espresso += `
<div class="productDiv">
<p>${eObj.name}</p>
<p>${eObj.type}</p>
<img src="${eObj.imgSrc}">
<button onclick="removeCI()"id = "remove">REMOVE</button>
</div>
`
document.getElementById("productList").innerHTML = espresso
}
const remove = document.getElementById("remove");
const removeI = (e) =>{
var clicked = e.target;
clicked.parentElement.remove();
}
const removeCI = () =>{
remove.addEventListener("click", removeI)
}
现在html
<div id = productList>
</div>
<div class="coffeeT">
<button id="espAdd"onclick="addEspresso()">Add</button>
</div>
如果有人能解释如何将产品添加到本地存储超过1次，那将是非常好的！期待感谢
您正在设置一个id为的按钮(要删除(，但当您添加多个浓缩咖啡时，您会有多个id相同的按钮。这会导致问题。相反，使用类名：
<button class="btn-remove">REMOVE</button>
我们需要用一些东西来跟踪这些项目，索引怎么样。数据索引属性将帮助我们删除
eObj.forEach((item,i) => { // item is the item, i is the index
espresso += `
<div class="productDiv" data-index="${i}">
然后创建一个单独的事件监听器，它将知道何时单击了删除按钮，并相应地采取行动：
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));
}
})
完整代码：
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));
}
})
const remove = document.getElementById("remove");
if (remove) {
const removeI = (e) => {
var clicked = e.target;
clicked.parentElement.remove();
}
if (removeI ) {
const removeCI = () => {
remove.addEventListener("click", removeI, false)
}
}
}
请检查此