Как реализовать проверку подлинности сценария java, которая потребует от пользователя выбора элемента перед покупкой? - PullRequest
Новая
       5

Как реализовать проверку подлинности сценария java, которая потребует от пользователя выбора элемента перед покупкой?

1 голос
/ 29 февраля 2020

Мне нужно добавить своего рода проверку к моему javascript коду, который выдаст сообщение «Пожалуйста, выберите элемент перед нажатием на покупку. Я включил мой код скрипта html и java ниже. Как только пользователь нажмет» ладно, им придется go вернуться назад и выбрать элемент, а затем нажать «покупка». 

<!DOCTYPE html>
    <html>
        <head>
            <title>E-SHOP</title>
            <meta name="description" content="description">
            <link rel="stylesheet" href="style.css" />
            <script src="java.js" async></script>
        </head>
        <body>
            <header class="main-header">
                <nav class="main-nav nav">
                    <ul>
                        <li><a href="sitemap.html">sitemap</a></li>
                        <li><a href="home.html">HOME</a></li>
                        <li><a href="distination.html">DESTINATION</a></li>
                        <li><a href="about.html">ABOUT US</a></li>
                        <li><a href="contactus.html">CONTACT US</a></li>
                        <li><a href="eshop.html">E-SHOP</a></li>
                        <a href="#"style="float:left">Love Travel</a>
                    </ul>
                </nav>
                <h1 class="band-name eshop-banner">E-SHOP</h1>
            </header>
            <section class="container content-section">
                <h2 class="section-header">Travel items </h2>
                <div class="shop-items">
                    <div class="shop-item">
                        <span class="shop-item-title">Black suitcase</span>
                        <img class="shop-item-image" src="Images/suitcase7.png">
                        <div class="shop-item-details">
                            <span class="shop-item-price">£54.99</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">Red and black suitcase</span>
                        <img class="shop-item-image" src="Images/suitcase10.png">
                        <div class="shop-item-details">
                            <span class="shop-item-price">£54.99</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">Yellow Backpack</span>
                        <img class="shop-item-image" src="Images/yellowbackpack.png">
                        <div class="shop-item-details">
                            <span class="shop-item-price">£49.99</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">Rainbow Backpack</span>
                        <img class="shop-item-image" src="Images/rainbowbackpack.png">
                        <div class="shop-item-details">
                            <span class="shop-item-price">£49.99</span>
                            <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                        </div>
                    </div>
                </div>

                <div class="shop-items">
                    <div class="shop-item">
                        <span class="shop-item-title">World T-Shirt</span>
                        <img class="shop-item-image" src="Images/shirt2.png">
                        <div class="shop-item-details">
                            <span class="shop-item-price">£19.99</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">Portable travel mug</span>
                        <img class="shop-item-image" src="Images/travelmug.png">
                        <div class="shop-item-details">
                            <span class="shop-item-price">£14.99</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-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>
            </section>

                            </a>
                        </li>
                    </ul>
                </div>
            </footer>
        </body>
    </html>

Мой java код скипта начинается здесь, что в основном является проверкой. Это бит, который нужно изменить. 

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 = `
        <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 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;
}

1 Ответ

0 голосов
/ 01 марта 2020

Все, что вам нужно сделать, это сделать переменную корзины глобальной, чтобы проверить ее длину при отправке, а также соответствующим образом обновить функцию purchaseClicked. Если длина корзины равна 0, то она пуста, иначе нет. Также я бы рекомендовал использовать переменные let вместо var, потому что в вашем коде нет необходимости использовать var.

Пусть являются переменными заблокированного объема, поэтому они ограничены указанным c блоком, что избавляет вас от необходимости беспокоиться о том, что они будут заменены или повторно инициализированы, как в 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...