how do i implement a java script validation that will require the user to select an item first before purchasing?

Question

I need to add some sort of validation to my javascript code that will prompt a message "please select an item before clicking purchase. i have include my html and java script code below. once the user presses ok, they will have to go back and select an item than press purchase.


    
        
            E-SHOP
            
            
            
        
        
            
                
                    
                        sitemap
                        HOME
                        DESTINATION
                        ABOUT US
                        CONTACT US
                        E-SHOP
                        Love Travel
                    
                
                E-SHOP
            
            
                Travel items 
                
                    
                        Black suitcase
                        
                        
                            £54.99
                            
                        
                    
                    
                        Red and black suitcase
                        
                        
                            £54.99
                            
                        
                    
                    
                        Yellow Backpack
                        
                        
                            £49.99
                            
                        
                    
                    
                        Rainbow Backpack
                        
                        
                            £49.99
                            
                        
                    
                

                
                    
                        World T-Shirt
                        
                        
                            £19.99
                            
                        
                    
                    
                        Portable travel mug
                        
                        
                            £14.99
                            
                        
                    
                
            
            
                CART
                
                    ITEM
                    PRICE
                    QUANTITY
                
                
                
                
                    Total
                    £0

My java scipt code starts here which is mainly validation. this is the bit that needs changing.

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. You will receive your purchased items within 3 working days')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

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)
    updateCartTotal()
}

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 = `
        
            
            ${title}
        
        ${price}
        
            
            
        `
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 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)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total;
}

user_10178278 · Answer

All you have to do is to make the cart variable global to check it length on submission and also updated the purchaseClicked function accordingly. If the length of cart is 0 then its empty else its not. Also i would recommend using let variables instead of var because there isnt any need for var in your code.

Let are blocked-Scope variables hence they are limited to a specific block, saving you the trouble of worrying about them being replace or reinitialized as you do in Var.

let cartRows = 0;   //-------------> Added it here from bottom to make it globally accessible
if (document.readyState == 'loading') {
 document.addEventListener('DOMContentLoaded', ready)
} else {
 ready()
}


function purchaseClicked() {
  if(cartRows && cartRows.length >0){
    alert('Thank you for your purchase. You will receive your purchased items within 3 working days')
    var cartItems = document.getElementsByClassName('cart-items')[0]

    while (cartItems.hasChildNodes()) {
      cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()    
  }else{
    alert('please select an item before clicking purchase');
  }

}




function updateCartTotal() {
  let cartItemContainer = document.getElementsByClassName('cart-items')[0]
  cartRows = cartItemContainer.getElementsByClassName('cart-row') //------>Here i removed the var type and pasted it above
  let total = 0;
  for (var i = 0; i < cartRows.length; i++) {
    let priceElement = cartRow.getElementsByClassName('cart-price')[0]
    let quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
    let price = parseFloat(priceElement.innerText.replace('£', ''))
    let quantity = quantityElement.value;
    total = total + (price * quantity)
  }
  total = Math.round(total * 100) / 100
  document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total;
}

how do i implement a java script validation that will require the user to select an item first before purchasing?

1 Answers