Javascript 获取当前目标的子对象的innerHTML

我有我的html的这一部分（不止一个相同类型）：

苹果手机
345445

我的javascript代码的这一部分旨在获取span标记的innerHTML并为其赋值，如图所示：

var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {

    element.addEventListener('click', function (event) {
        var productName = document.getElementsByClassName('product-name')[0].innerHTML;
        var productPrice = document.getElementsByClassName('product-price')[0].innerHTML;
        var cartProductname = event.currentTarget.productName;
        var cartProductprice = event.currentTarget.productPrice;
        var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
        document.getElementById('dashboard-cart').innerHTML += cartContent;
    });
});

var-productList=document.querySelectorAll（'.this-product'）；
productList.forEach（函数（元素）{
元素。addEventListener（'click'，函数（事件）{
var productName=document.GetElementsByCassName（'product-name'）[0].innerHTML；
var productPrice=document.getElementsByClassName（'product-price'）[0].innerHTML；
var cartProductname=event.currentTarget.productName；
var cartProductprice=event.currentTarget.productPrice；
var cartContent=''+cartProductname+''+cartProductprice+'Total=
'
document.getElementById（'dashboard-cart'）。innerHTML+=cartContent；
});
});

---

除显示为未定义的cartProductname和cartProductprice外，上面的每个变量都显示得很好，并且vscode告诉我已声明但未读取productName。哪里可能出错？

您可以使用

event.currentTarget.querySelector（'.product name'）

获取另一个元素中的元素

如果我正确理解您的问题，您可以对迭代的每个产品项元素调用

querySelector

：

var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {

    element.addEventListener('click', function (event) {

        // Update these two lines like so:
        var productName = element.querySelector('.product-name').innerHTML;
        var productPrice = element.querySelector('.product-price').innerHTML;

        var cartProductname = productName; // event.currentTarget.productName;
        var cartProductprice = productPrice; // event.currentTarget.productPrice;
        var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
        document.getElementById('dashboard-cart').innerHTML += cartContent;
    });
});

var-productList=document.querySelectorAll（'.this-product'）；
productList.forEach（函数（元素）{
元素。addEventListener（'click'，函数（事件）{
//更新这两行，如下所示：
var productName=element.querySelector（'.product name'）.innerHTML；
var productPrice=element.querySelector（'.product price'）.innerHTML；
var cartProductname=productName；//event.currentTarget.productName；
var cartProductprice=productPrice；//event.currentTarget.productPrice；
var cartContent=''+cartProductname+''+cartProductprice+'Total=
'
document.getElementById（'dashboard-cart'）。innerHTML+=cartContent；
});
});

Wow。你太棒了，也是个很棒的人。通过删除（'.product price'）后面的[0]来编辑答案，使其正确。@EricO。太好了-谢谢你的反馈！希望这对您的项目有所帮助：-）

var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {

    element.addEventListener('click', function (event) {

        // Update these two lines like so:
        var productName = element.querySelector('.product-name').innerHTML;
        var productPrice = element.querySelector('.product-price').innerHTML;

        var cartProductname = productName; // event.currentTarget.productName;
        var cartProductprice = productPrice; // event.currentTarget.productPrice;
        var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
        document.getElementById('dashboard-cart').innerHTML += cartContent;
    });
});