时间戳

首页 > 解决方案 > 为什么我只能使用 .FILTER 删除本地存储的最后一项

javascript - 为什么我只能使用 .FILTER 删除本地存储的最后一项

问题描述

我不明白为什么我只能删除我的相机列表的最后一个元素

我可以删除最后一个，即使它有效，我也会收到错误：

Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null
    at panier.js:43
    at Array.forEach (<anonymous>)
    at displayBasket (panier.js:42)

所以如果删除最后一个并刷新我得到了我的 2 个摄像头（错误无法读取）。如果我再次删除最后一个并刷新并获得最后一个相机（仍然出现错误无法读取）

但是如果我点击 SUPPRIMER （用英文删除），我的表中只有 1 个项目，它的工作没有错误。

我试图理解，但我不明白。

请帮助我：p

async function displayBasket() {
    const cameraIds = getCameraIds();

    const basket = document.getElementById("panier");

    if (cameraIds.length === 0) {
        basket.innerHTML = `<p>Votre panier est vide</p>`
    } else {
        const promises = [];

        cameraIds.forEach(cameraId => {
            promises.push(getCameraDetails(cameraId))
        })

        const allCameraDetails = await Promise.all(promises);
        const basketTable = document.getElementById("basketTable");
        console.log('allCameraDetails', allCameraDetails)
        allCameraDetails.forEach((cameraDetails, index) => {
            basketTable.innerHTML += `
            <tr>
                <td><img id="imageProduct" src="${cameraDetails.imageUrl}"></td>
                <td id="descriptionProduct">${cameraDetails.name}</td>
                <td id="priceProduct">${(cameraDetails.price / 100).toFixed(2)}</td>
                <td><button id="button-${index}">Supprimer</button></td>
            </td>
            </tr>
            `
            buttonProduct = document.getElementById(`button-${index}`);
            buttonProduct.addEventListener('click', () => {
                const storageCameras = JSON.parse(localStorage.getItem('basketCameras'));
                const newStorageCameras = storageCameras.filter(currentCameraId => { return currentCameraId !== cameraDetails._id })
                localStorage.setItem('basketCameras', JSON.stringify(newStorageCameras));

                basket.innerHTML = ``;
                displayBasket();
            })

        });
    }
}

（看截图）我的 3 个元素

标签： javascriptlocal-storageinnerhtml

解决方案

修改 html 后尝试更新事件监听器。

        allCameraDetails.forEach((cameraDetails, index) => {
            basketTable.innerHTML += `
            <tr>
                <td><img id="imageProduct" src="${cameraDetails.imageUrl}"></td>
                <td id="descriptionProduct">${cameraDetails.name}</td>
                <td id="priceProduct">${(cameraDetails.price / 100).toFixed(2)}</td>
                <td><button id="button-${index}">Supprimer</button></td>
            </td>
            </tr>
            `})
            allCameraDetails.forEach((_, index) => {
            buttonProduct = document.getElementById(`button-${index}`);
            buttonProduct.addEventListener('click', () => {
                const storageCameras = JSON.parse(localStorage.getItem('basketCameras'));
                const newStorageCameras = storageCameras.filter(currentCameraId => { return                           currentCameraId !== cameraDetails._id })
                localStorage.setItem('basketCameras', JSON.stringify(newStorageCameras));

                basket.innerHTML = ``;
                displayBasket();
            })
            })

推荐阅读