JavaScript If else statement is not met

Question

The problem is the if else statement is not met at updatediscountTotal() and after removing all the item from the cart, the total is not return to 0.
Requirement:
i. If the user order
• Between 5 - 10 products, 5% discount of total price.
• More than 10 products, 15% discount of total price
ii. If the total price is larger than $100 then the postage fee is free. If it is not, then postage fee of $10 is applied.

 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

The problem is your if condition:

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

EVERY number is either greater than 5 or less than 10. You want && here, not || .