如何选择模板字面量内的元素类并在EventListener外部访问？

问题根源 #

你遇到的「未定义」问题主要来自两点：

1. 动态创建的cartInfo及其内部元素，是在点击事件的回调函数里定义的，作用域仅限于这个函数内部，外部自然无法访问。
2. 就算你在外部用document.querySelector去查找这些类（比如.carted-items），这些元素是点击后才生成的，页面初始化时DOM里根本不存在，提前查询肯定返回undefined。

解决方案 #

方案1：把元素存储到外部作用域变量

如果需要在外部访问最新创建的元素，可以在事件监听外定义变量来保存：

// 在事件监听外部定义变量，用于存储动态创建的元素
let currentCartItem;

addToCart.addEventListener('click', (e) =>  {
    let cartButton = e.currentTarget;
    let price = cartButton.parentElement.parentElement.parentElement.children[3].children[0].children
    let name = cartButton.parentElement.parentElement.parentElement.children[1].textContent.trim();
    let image = cartButton.parentElement.parentElement.parentElement.parentElement.children[0].src;
    let position = image.indexOf("images");
    let partPath = image.slice(position);
    const shopping = {};
    shopping.img = partPath;
    shopping.name = name;
    shopping.price = price;

    const cartInfo = document.createElement('div');
    cartInfo.classList.add('carted-items');
    // 修正模板里的标签错误：</span 改为 </span>
    cartInfo.innerHTML =`<figure class="carted-image">
                <img src="${shopping.img}" alt="carted image" class="carted-img">
            </figure>
            <div class="carted-info">
                <h4 class="carted-name">${shopping.name}</h4>
                <div class="quan-price">
                    <span class="carted-quantity">$${shopping.price} * <span class = "number-of-items">3         </span></span>
                    <span class="carted-price">$375.00</span>
                </div>
            </div>
            
            <figure class="delete-image">
                <img src="./images/icon-delete.svg" alt="delete button" class="delete-img">
            </figure>`;

    cartContent.insertBefore(cartInfo, checkOut);
    // 将创建的元素赋值给外部变量
    currentCartItem = cartInfo;
    alert("item added to the cart"); 
});

// 点击事件触发后，即可通过currentCartItem访问最新创建的元素

方案2：用事件委托处理动态元素交互

如果是想给动态创建的元素（比如删除按钮）绑定事件，不用直接获取元素，而是给父元素加事件委托：

// 在外部给父元素绑定事件，监听子元素的点击
cartContent.addEventListener('click', (e) => {
    // 判断点击的是删除按钮
    if(e.target.classList.contains('delete-img')){
        // 获取对应的购物项元素并删除
        const cartItem = e.target.closest('.carted-items');
        cartItem.remove();
    }
});

方案3：创建后传递给外部函数处理

如果需要在元素创建后立即让外部逻辑处理，可以调用外部函数并传入元素：

// 外部定义处理函数
function handleCartItemAdded(itemElement){
    // 在这里处理元素，比如绑定事件、修改内容等
    console.log(itemElement);
}

addToCart.addEventListener('click', (e) =>  {
    // ... 你的原有代码 ...

    const cartInfo = document.createElement('div');
    cartInfo.classList.add('carted-items');
    cartInfo.innerHTML =`<!-- 你的模板内容 -->`;

    cartContent.insertBefore(cartInfo, checkOut);
    // 调用外部函数，把元素传过去
    handleCartItemAdded(cartInfo);
    alert("item added to the cart"); 
});

内容的提问来源于stack exchange，提问作者hayzed