JavaScript If else 語句不符合

Question

問題是在 updatediscountTotal() 中不滿足 if else 語句，並且從購物車中刪除所有商品后，總數不返回 0。
要求：
一世。 如果用戶訂購
• 5 - 10 件產品，總價的 5% 折扣。
• 超過10種產品，總價15%的折扣
ii. 如果總價超過 100 美元，則免郵費。 如果不是，則收取 10 美元的郵費。

 if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', ready) } else { ready() } function ready() { var removeCartItemButtons = document.getElementsByClassName('btn-danger') for (var i = 0; i < removeCartItemButtons.length; i++) { var button = removeCartItemButtons[i] button.addEventListener('click', removeCartItem) } var quantityInputs = document.getElementsByClassName('cart-quantity-input') for (var i = 0; i < quantityInputs.length; i++) { var input = quantityInputs[i] input.addEventListener('change', quantityChanged) } var addToCartButtons = document.getElementsByClassName('shop-item-button') for (var i = 0; i < addToCartButtons.length; i++) { var button = addToCartButtons[i] button.addEventListener('click', addToCartClicked) } document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked) } function purchaseClicked() { alert('Thank you for your purchase') var cartItems = document.getElementsByClassName('cart-items')[0] while (cartItems.hasChildNodes()) { cartItems.removeChild(cartItems.firstChild) } updatediscountTotal() } function removeCartItem(event) { var buttonClicked = event.target buttonClicked.parentElement.parentElement.remove() updatediscountTotal() } function quantityChanged(event) { var input = event.target if (isNaN(input.value) || input.value <= 0) { input.value = 1 } updatediscountTotal() } function addToCartClicked(event) { var button = event.target var shopItem = button.parentElement.parentElement var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src addItemToCart(title, price, imageSrc) updatediscountTotal() } function addItemToCart(title, price, imageSrc) { var cartRow = document.createElement('div') cartRow.classList.add('cart-row') var cartItems = document.getElementsByClassName('cart-items')[0] var cartItemNames = cartItems.getElementsByClassName('cart-item-title') for (var i = 0; i < cartItemNames.length; i++) { if (cartItemNames[i].innerText == title) { alert('This item is already added to the cart') return } } var cartRowContents = ` <div class="cart-item cart-column"> <img class="cart-item-image" src="${imageSrc}" width="100" height="100"> <span class="cart-item-title">${title}</span> </div> <span class="cart-price cart-column">${price}</span> <div class="cart-quantity cart-column"> <input class="cart-quantity-input" type="number" value="1"> <button class="btn btn-danger" type="button">REMOVE</button> </div>` cartRow.innerHTML = cartRowContents cartItems.append(cartRow) cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem) cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged) } function updatediscountTotal() { var cartItemContainer = document.getElementsByClassName('cart-items')[0] var cartRows = cartItemContainer.getElementsByClassName('cart-row') var total = 0 countItem=0 for (var i = 0; i < cartRows.length; i++) { var cartRow = cartRows[i] var priceElement = cartRow.getElementsByClassName('cart-price')[0] var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0] var price = parseFloat(priceElement.innerText.replace('$', '')) var quantity = quantityElement.value total = total + (price * quantity) if (total<100){ shipping=10 } else{ shipping=0 } for (var j = 0; j < quantity.length; j++) { //to count item in every row var countItem = quantity[j] countItem+=quantity } if (countItem>5 || countItem<10) { discountprice=total*0.05 discountedprice=total-discountprice+shipping} else if (countItem>10){ discountprice=total*0.15 discountedprice=total-discountprice+shipping} } shipping = Math.round(shipping * 100) / 100 document.getElementsByClassName('cart-shipping-price')[0].innerText = '$' + shipping discountprice = Math.round(discountprice * 100) / 100 document.getElementsByClassName('cart-discount-price')[0].innerText = '$' + discountprice subtotal = Math.round(total * 100) / 100 document.getElementsByClassName('cart-subtotal-price')[0].innerText = '$' + total discountedprice = Math.round(discountedprice * 100) / 100 document.getElementsByClassName('cart-total-price')[0].innerText = '$' + discountedprice }

 <div><center><h1> ALL PRODUCT </h1></center></div> <section class="container content-section"> <h2 class="section-header">Hoodie & Jacket</h2> <div class="shop-items"> <div class="shop-item"> <span class="shop-item-title">Item1</span> <img class="shop-item-image" src="img/j1.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$25.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> <div class="shop-item"> <span class="shop-item-title">Item2</span> <img class="shop-item-image" src="img/j2.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$14.90</span> <button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button> </div> </div> <div class="shop-item"> <span class="shop-item-title">Item3</span> <img class="shop-item-image" src="img/j3.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$59.90</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> </div> </section> <section class="container content-section"> <h2 class="section-header">T-shirt</h2> <div class="shop-items"> <div class="shop-item"> <span class="shop-item-title">Item4</span> <img class="shop-item-image" src="img/s1.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$30.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> <div class="shop-item"> <span class="shop-item-title">Item5</span> <img class="shop-item-image" src="img/s2.jpeg"> <div class="shop-item-details"> <span class="shop-item-price">$15.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> <div class="shop-item"> <span class="shop-item-title">Item6</span> <img class="shop-item-image" src="img/s3.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$30.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> </div> </section> <section class="container content-section"> <h2 class="section-header">Dress</h2> <div class="shop-items"> <div class="shop-item"> <span class="shop-item-title">Item7</span> <img class="shop-item-image" src="img/d1.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$50.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> <div class="shop-item"> <span class="shop-item-title">Item8</span> <img class="shop-item-image" src="img/d2.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$60.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> <div class="shop-item"> <span class="shop-item-title">Item9</span> <img class="shop-item-image" src="img/d3.jpg"> <div class="shop-item-details"> <span class="shop-item-price">$55.00</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button> </div> </div> </div> </section> <section class="container content-section"> <h2 class="section-header">CART</h2> <div class="cart-row"> <span class="cart-item cart-header cart-column">ITEM</span> <span class="cart-price cart-header cart-column">PRICE</span> <span class="cart-quantity cart-header cart-column">QUANTITY</span> </div> <div class="cart-items"> </div> <div class="cart-shipping"> <strong class="cart-shipping-title">Shipping Fee</strong> <span class="cart-shipping-price">$0</span> <br> </div> <div class="cart-discount"> <strong class="cart-discount-title">Discount</strong> <span class="cart-discount-price">$0</span><br> </div> <div class="cart-total"> <strong class="cart-subtotal-title">SubTotal</strong> <span class="cart-subtotal-price">$0</span> </div> <div class="cart-total"> <strong class="cart-total-title">Total</strong> <span class="cart-total-price">$0</span> </div> <button class="btn btn-primary btn-purchase" type="button">Purchase</button> </body> </html>

Answer 1

問題是你的if條件：

           if (countItem>5 || countItem<10) {

每個數字都大於 5 或小於 10。你想要&&在這里，而不是|| .