如何使用變量訪問 item.name、item.price、item.tag、item.incart

Question

如何使用變量訪問 div 內的 item.name、item.price、item.tag、item.incart。 我已經嘗試了所有使用 DOM 的方法。

 function summary() { myObj = `{"naturalstraight":{"name":"Natural Straight","tag":"naturalstraight","price":95,"incart":2}}` // localStorage.getItem("productsInCart"); myObj = JSON.parse(myObj); console.log(myObj); if (myObj && summaryContainer) { summaryContainer.innerHTML = ''; Object.values(myObj).map(item => { summaryContainer.innerHTML += ` <div class="product"> <ion-icon name="close-circle-outline"></ion-icon> <img src="./images/${item.tag}.jpg"> <span>${item.name}</span> </div> <div class="price">$${item.price}</div> <div class="quantity"> <span>${item.incart}</span> </div> <div class="total">$${item.incart * item.price},00 </div>`; }); } } summary();

 <div class="col-50"> <div id="orderSummary"> <h2>Order summary</h2> <div class="summary-container" style="padding-bottom: 0px;"> <div class="summary" style="width:800px"> </div> </div> </div> </div>

Answer 1

如果我將路徑添加到 div，則代碼有效

const summaryContainer = document.querySelector("#orderSummary .summary-container > .summary");

 function summary() { const summaryContainer = document.querySelector("#orderSummary.summary-container >.summary"); myObj = `{"naturalstraight":{"name":"Natural Straight","tag":"naturalstraight","price":95,"incart":2}}` // localStorage.getItem("productsInCart"); myObj = JSON.parse(myObj); if (myObj && summaryContainer) { summaryContainer.innerHTML = ''; Object.values(myObj).map(item => { summaryContainer.innerHTML += ` <div class="product"> <ion-icon name="close-circle-outline"></ion-icon> <img src="./images/${item.tag}.jpg"> <span>${item.name}</span> </div> <div class="price">$${item.price}</div> <div class="quantity"> <span>${item.incart}</span> </div> <div class="total">$${item.incart * item.price},00 </div>`; }); } } window.addEventListener("load",function() { summary(); })

 <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.1.0-0/ionicons/ionicons.esm.js"></script> <script nomodule="" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.1.0-0/ionicons/ionicons.js"></script> <div class="col-50"> <div id="orderSummary"> <h2>Order summary</h2> <div class="summary-container" style="padding-bottom: 0px;"> <div class="summary" style="width:800px"> </div> </div> </div> </div>