購物車，點擊添加到購物車按鈕后：價格已添加但顯示金額為零

Question

錯誤：未捕獲的類型錯誤：無法讀取 undefined(...) 的屬性“拆分”

大家好，我將添加到購物車模式中，然后我從codepen示例中獲得了一些參考，然后我在代碼中進行了一些更改。 后來我運行，我得到了上面的錯誤，我不知道該怎么解決，我試過了，但解決不了..當我評論這行，代碼會工作，但該產品的成本顯示車是空的。 只顯示零金額。

js 處的錯誤行： price = parseFloat(x.price.split('₹')[1]);

我的自定義代碼筆鏈接： https ://codepen.io/guenon/pen/VwaxXLJ

原始代碼筆鏈接： https ://codepen.io/PurpleTigress/pen/eXPxxq

 /* get cart total from session on load */ updateCartTotal(); /* button event listeners */ document.getElementById("emptycart").addEventListener("click", emptyCart); var btns = document.getElementsByClassName('addtocart'); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function() { addToCart(this); }); } /* ADD TO CART functions */ function addToCart(elem) { //init var sibs = []; var getprice; var getproductName; var cart = []; var stringCart; //cycles siblings for product info near the add button while (elem = elem.previousSibling) { if (elem.nodeType === 3) continue; // text node if (elem.className == "price") { getprice = elem.innerText; } if (elem.className == "productname") { getproductName = elem.innerText; } sibs.push(elem); } //create product object var product = { productname: getproductName, price: getprice }; //convert product data to JSON for storage var stringProduct = JSON.stringify(product); /*send product data to session storage */ if (!sessionStorage.getItem('cart')) { //append product JSON object to cart array cart.push(stringProduct); //cart to JSON stringCart = JSON.stringify(cart); //create session storage cart item sessionStorage.setItem('cart', stringCart); addedToCart(getproductName); updateCartTotal(); } else { //get existing cart data from storage and convert back into array cart = JSON.parse(sessionStorage.getItem('cart')); //append new product JSON object cart.push(stringProduct); //cart back to JSON stringCart = JSON.stringify(cart); //overwrite cart data in sessionstorage sessionStorage.setItem('cart', stringCart); addedToCart(getproductName); updateCartTotal(); } } /* Calculate Cart Total */ function updateCartTotal() { //init var total = 0; var price = 0; var items = 0; var productname = ""; var carttable = ""; if (sessionStorage.getItem('cart')) { //get cart data & parse to array var cart = JSON.parse(sessionStorage.getItem('cart')); //get no of items in cart items = cart.length; //loop over cart array for (var i = 0; i < items; i++) { //convert each JSON product in array back into object var x = JSON.parse(cart[i]); //get property value of price price = parseFloat(x.price.split('₹')[1]); productname = x.productname; //add price to total carttable += "<tr><td>" + productname + "</td><td>₹" + price.toFixed(2) + "</td></tr>"; total += price; } } //update total on website HTML document.getElementById("total").innerHTML = total.toFixed(2); //insert saved products to cart table document.getElementById("carttable").innerHTML = carttable; //update items in cart on website HTML document.getElementById("itemsquantity").innerHTML = items; } //user feedback on successful add function addedToCart(pname) { var message = pname + " was added to the cart"; var alerts = document.getElementById("alerts"); alerts.innerHTML = message; if (!alerts.classList.contains("message")) { alerts.classList.add("message"); } } /* User Manually empty cart */ function emptyCart() { //remove cart session storage object & refresh cart totals if (sessionStorage.getItem('cart')) { sessionStorage.removeItem('cart'); updateCartTotal(); //clear message and remove class style var alerts = document.getElementById("alerts"); alerts.innerHTML = ""; if (alerts.classList.contains("message")) { alerts.classList.remove("message"); } } } $('.ticket-text').each(function() { var words = $(this).text().split(" "); var maxWords = 6; if (words.length > maxWords) { html = words.slice(0, maxWords) + '<span class="more_text" style="display:none;"> ' + words.slice(maxWords, words.length) + '</span>' + '<a href="#" class="read_more">...<br/>[Read More]</a>' $(this).html(html) $(this).find('a.read_more').click(function(event) { $(this).toggleClass("less"); event.preventDefault(); if ($(this).hasClass("less")) { $(this).html("<br/>[Read Less]") $(this).parent().find(".more_text").show(); } else { $(this).html("...<br/>[Read More]") $(this).parent().find(".more_text").hide(); } }) } })

 @import url('https://fonts.googleapis.com/css?family=Quicksand:400,700'); *, ::before, ::after { box-sizing: border-box; } body { font-family: 'Quicksand', sans-serif; text-align: center; line-height: 1.5em; /* background:#E0E4CC; */ background: #69d2e7; background: -moz-linear-gradient(-45deg, #69d2e7 0%, #a7dbd8 25%, #e0e4cc 46%, #e0e4cc 54%, #f38630 75%, #fa6900 100%); background: -webkit-linear-gradient(-45deg, #69d2e7 0%, #a7dbd8 25%, #e0e4cc 46%, #e0e4cc 54%, #f38630 75%, #fa6900 100%); background: linear-gradient(135deg, #69d2e7 0%, #a7dbd8 25%, #e0e4cc 46%, #e0e4cc 54%, #f38630 75%, #fa6900 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69d2e7', endColorstr='#fa6900', GradientType=1); } hr { border: none; background: #E0E4CC; height: 1px; } .container { max-width: 800px; margin: 1em auto; background: #FFF; padding: 30px; border-radius: 5px; } .productcont { display: grid; } .product { width: 310px; padding: 1em; border: 1px solid black; box-shadow: 0 0 5px 5PX rgba(229, 66, 64, 1); margin-right: 1em; border-radius: 5px; } .cart-container { border: 1px solid #E0E4CC; border-radius: 5px; margin-top: 1em; padding: 1em; } button, input[type="submit"] { border: 1px solid #FA6900; color: #fff; background: #ed3330; padding: 0.6em 1em; font-size: 1em; line-height: 1; border-radius: 1.2em; transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out; } button:hover, button:focus, button:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active { background: #0894fc; border-color: black; color: #000; cursor: pointer; } table { margin-bottom: 1em; border-collapse: collapse; } table td, table th { text-align: left; padding: 0.25em 1em; border-bottom: 1px solid #E0E4CC; } #carttotals { margin-right: 0; margin-left: auto; } .cart-buttons { width: auto; margin-right: 0; margin-left: auto; display: flex; justify-content: flex-end; padding: 1em 0; } #emptycart { margin-right: 1em; } table td:nth-last-child(1) { text-align: right; } .message { border-width: 1px 0px; border-style: solid; border-color: #A7DBD8; color: #679996; padding: 0.5em 0; margin: 1em 0; } .ticket-text { text-align: center; }

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <h1>Course Packages</h1><br> <div id="alerts"></div> <div class="productcont"> <div class="product"> <h3 class="productname">product name</h3> <p><strong>Class :</strong></p> <p><strong>Board :</strong></p> <p><strong>Subject :</strong></p> <p class="ticket-text">Bacsaddsadsad on ipsum dolor amet se vsc sadsadasdd addasd sfsd sdfsdf</p> <span class="price amount">₹ 5.05</span> <del><span class="offered_price amount">₹ 1000</span></del><br></br> <button class="addtocart">Add To Cart</button> <button class="buynow ">Buy Now</button> </div> </div> <div class="cart-container"> <h2>Cart</h2> <table> <thead> <tr> <th><strong>Product</strong></th> <th><strong>Price</strong></th> </tr> </thead> <tbody id="carttable"> </tbody> </table> <hr> <table id="carttotals"> <tr> <td><strong>Items</strong></td> <td><strong>Total</strong></td> </tr> <tr> <td>x <span id="itemsquantity">0</span></td> <td>₹<span id="total">0</span></td> </tr> </table> <div class="cart-buttons"> <button id="emptycart">Empty Cart</button> <button id="checkout">Checkout</button> </div> </div> </div>

Answer 1

在 codepen 中，當您將多個類分配給元素時，您應該檢查是否使用classList類應用於該元素。

這是更新代碼的鏈接

 while ((elem = elem.previousSibling)) {
    if (elem.nodeType === 3) continue; // text node
    if (elem.className == "price")
   // instead of using above condition use either
    if(elem.classList.contains('price'))
   // or
    if(elem.className === "price amount") 

    {
      getprice = elem.innerText;
    }
    if (elem.className == "productname") {
      getproductName = elem.innerText;
    }
    sibs.push(elem);
  }

Answer 2

產品價格類名不正確。 檢查此鏈接價格是否已添加

這是問題

<span class="price amount">₹ 5.05</span>

更正如下： https : //jsfiddle.net/h86cp4q2/

更改以下內容

1.

<span class="price amount">₹ 5.05</span>

到

<span class="priceamount">₹ 5.05</span>

if(elem.className == "price"){

到

if(elem.className == "priceamount"){