Javascript 如何使用onclick侦听器从元素中选择数据？

我目前正在开发一个web应用程序，该应用程序以后必须作为某种webshop来使用。我现在正在开发一个addToCart函数，它必须从点击的元素中选取某些数据，即产品的名称和价格，然后将1添加到PC并将所有内容保存到会话中，然后将这2个值粘贴到我制作的模板中，并将其放在购物车中。我现在正试图打印出我刚才提到的两个值，但我现在被卡住了

这是我为在所有产品中加载而编写的当前javascript代码，以及我尝试显示单击项的一些值：

 $(function(){
        $.getJSON("assets/products/sample_products.json", function(response) {
            $.each(response.data, function (i, el) {
                let card = $($('#productCard-template').html());
                card.find('#cardName').html( el.name);
                card.find('#cardPrice').html( '€' + el.price );
                card.find('.productItem').attr('data-price', el.price)
                    .attr('data-article-number', el.article_number)
                    .attr('data-id', el.id)
                    .attr('data-name', el.name)
                    .attr('data-stock', el.stock)
                    .attr('data-categories', el.categories);
                $('#touchViewProducts').append(card);
            });
        });
    });
    
    //onclick function adds data of product to the designated template
    function addToCart(){
        var value = document.getElementById("productCard").value;
        var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
        var total = 0;
        console.log(this.data-name)
    
    }

这是模板的html代码：

   <div class="row touchViewSection">
                    <!-- shopping sector -->
                    <!-- touchView -->
                    <!-- categories menu -->
                    <div class="col-3 categoriesSection">
                        <div class="categories">
                            <p style="background-color: white; margin-bottom: 0px" > Categories </p>
                            <a class="nav-link" id="all" href="#">All</a>
                            <a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
                            <a class="nav-link" id="rotjes" href="#">Rotjes</a>
                            <a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
                        </div>
                    </div>

                    <!-- categories menu -->
                    <!--                <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
                    <div class="col-9 productItems" >
                        <br>
                        <div class="row" id="touchViewProducts">

                        </div>
                    </div>
                </div>
                <!--/touchView -->
                <!--Keyboard View -->
                <div class="row keyboardViewSection">
                    <div class="col-12 keyboardViewRow">
                        <table id="data-table" class="table table-bordered" style="width: 100%;">
                            <thead id="tableHead">
                            <tr>
                                <th> # </th>
                                <th> Product name </th>
                                <th> Free Stock </th>
                                <th> Price </th>
                                <th> Action </th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!--/Keyboard View -->
                <div class="footer">
                    <div class="container">
                        <p class="text-muted"> Developed by Vesta Group</p>
                    </div>
                </div>
            </div>
            <!--/shopping sector-->
            <div class="col-4 cartSection">
                <!--cart-->
                <div class="row">
                    <div class="col-5">Product</div>
                    <div class="col-1">Pcs.</div>
                    <div class="col-2">Price</div>
                    <div class="col-3">Total</div>
                </div>
                <hr style="background-color: white;">
                <div id="output" class="row"></div>
                <div class="row shopcardProducts" id="shopcartProducts">
                </div>

                <div class="row cartCheck">
                    <div class="col-5">Number of products</div>
                    <div class="col-1">1</div>
                    <div class="col-2">Subtotal</div>
                    <div class="col-3 total">&euro; 0,00</div>

                    <div class="col-5"></div>
                    <div class="col-1"></div>
                    <div class="col-2">Total </div>
                    <div class="col-3">&euro; 0,00</div>
                </div>
                <div class="row cartCheck">
                    <div class="col-12 checkoutBtn"> Checkout </div>
                    <div class="col-6 addDiscountBtn"> Add discount </div>
                    <div class="col-6 cancelBtn"> Cancel </div>
                </div>

                <!--buttons-->
                <!--/cart-->
            </div>
        </div>
    </div>

    <script type="text/template" id="productCard-template">
        <div class="col-3 productCard" id="productCard" onclick="addToCart()">
            <a href="#" class="productItem">
                <div class="card">
                    <img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
                    <div class="container">
                        <div class="row" style="height: 6vh; max-width: 20ch;">
                            <p id="cardName"> </p>
                        </div>

                        <div class="row" style="height: 50%">
                          <b><p id="cardPrice"></p></b>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </script>

    <script type="text/template" id="shopcartRow-template">
        <div class="row">
            <div class="col-5" id="valueName"> </div>
            <div class="col-1" id="valueQty"> </div>
            <div class="col-2" id="valuePrice"> </div>
            <div class="col-3" id="valueTotal"> </div>
        </div>
    </script>

这是一张web应用程序的图片，我希望这能让它更清晰。

因为addToCart是一个回调，所以您可以使用它来访问其上下文调用方元素：

function addToCart(){
    var value = $(this).val(); // what val you want to refer? there are no input in the template
    var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
    var total = 0;
    console.log(this.data-name)
}

---

感谢您的回复，我想知道按下的产品的名称和价格，并将其添加到空模板shopcartCrow模板中。因此，这将出现在valueName和valuePrice中。我希望您理解我的意思，shopcartRow模板在哪里使用？shopcartRow模板尚未使用，我希望在touchView中单击其中一种产品后立即使用它，touchView是什么？解决方案取决于数据在DOM中的位置，因此我只能给出一般性的建议，而不是确切的解决方案。。基本思想是在回调中依赖于此，并在元素之间进行交叉引用。我已经更新了问题，并向其中添加了其余的代码。Touchview是图像的主要概述。我还为这个问题添加了一个截图，这是我应该做的。