时间戳

首页 > 解决方案 > 在另一个函数中调用函数的问题

javascript - 在另一个函数中调用函数的问题

问题描述

在 displayCart() 函数中调用 deleteButtons() 函数时，我收到“无法读取未定义的属性‘addEventListener’”错误的响应。谁能帮我解决这个问题？

  function displayCart() {
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);


let productContainer = document.querySelector(".products");
let cartCost = localStorage.getItem('totalCost');

// console.log(cartItems);---从本地存储拉取数据

console.log(cartItems); 

if(cartItems && productContainer) {

    productContainer.innerHTML ='';
    Object.values(cartItems).map(item => {
    productContainer.innerHTML +=   
        `
        <div class="products">
        <ion-icon name="close-circle-outline"></ion-icon>

         <span>${item.name}</span>            


    <div class="price">$${item.price},00</div>
    <div class="quantity">
        <ion-icon name="caret-back-circle-outline">Remove</ion-icon>

        <span>${item.incart}</span> 
        <ion-icon name="caret-forward-circle-outline"></ion-icon>
    </div>
    <div class="total">
    $${item.incart * item.price},00 
    </div>
    </div>
        `
    ;
    });

    productContainer.innerHTML += 
        `
        <div class="basketTotalContainer">
        <h4 class="basketTotalTitle"> Basket Total </h4>
        <h4 class ="basketTotal"> 
            $${cartCost},00
        </h4> 
    </div>

        `;          
 }

删除按钮（）；}

功能删除按钮（）{

let deleteButtons = document.querySelectorAll('.product ion-icon'); 
let productName;
let productNumbers = localStorage.getItem('cartNumbers')
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);
let cartCost = localStorage.getItem('totalCost');   
console.log(cartItems);

for(let i=0; i < 10; i++)    
{

    deleteButtons[i].addEventListener('click', () => {
    productName = deleteButtons[i].parentElement.textContent.trim().toLowerCase().replace(/ /g, '');    
console.log(productName);
console.log(cartItems[productName].price + " " + cartItems[productName].incart);
localStorage.setItem('cartNumbers',productNumbers - cartItems[productName].incart);
localStorage.setItem('totalCost', cartCost - (cartItems[productName].price * cartItems[productName].incart));
delete cartItems[productName];
localStorage.setItem('productsInCart', JSON.stringify(cartItems));      
    });
}
}

标签： javascript

解决方案

我看到两件事要考虑：

  1. 类名不匹配.product时应该是.products
  2. 您正在使用任意固定数字 (10) 来迭代动态分配的元素集合。

由于集合是动态的，您应该使用它的大小来知道何时停止循环，在这种情况下，使用deleteButtons.length

请参阅下面的可运行示例：

let deleteButtons = document.querySelectorAll('.products ion-icon')

for(let i=0; i < deleteButtons.length; i++) {
  console.log(i)
  deleteButtons[i].addEventListener('click', () => {
    console.log(`This is the deleteButtons #${i}`);
  });
}
body { font-family: sans-serif; }
ion-icon { cursor: pointer; padding 1em; margin: 1em 0; border: 1px solid #333 }
<hr/>
<div class="products">
  <ion-icon name="close-circle-outline">A</ion-icon>
  <span>${item.name}</span>
  <div class="price">$${item.price},00</div>
  <div class="quantity">
    <ion-icon name="caret-back-circle-outline">Remove</ion-icon>
    <span>${item.incart}</span> 
    <ion-icon name="caret-forward-circle-outline">X</ion-icon>
  </div>
  <div class="total">
  $${item.incart * item.price},00
</div>

推荐阅读