Как интегрировать JavaScript в HTML-страницу - PullRequest
Новая
       5

Как интегрировать JavaScript в HTML-страницу

0 голосов
/ 20 июня 2019

Я пытаюсь создать HTML-сайт, который продает ручки, карандаши и ластики.Моя проблема заключается в интеграции JavaScript в мою HTML-страницу.Все работало должным образом до тех пор, пока последние пару кусков JavaScript не задумывались о том, как я мог бы решить эту проблему. 

<!DOCTYPE html>

<html>

<head>

<title>Pens, Pencils and Erasers</title>

<meta name="description" content="This is the description">

<link rel="stylesheet" href="style.css" />

<script src="store.js" async></script>

</head>

<body>

<header class="main-header">

<nav class="main-nav nav">

<ul>

<li><a href="index.html">HOME</a></li>

</ul>

</nav>

<h1 class="store-name store-name-large">Pens, Pencils and Erasers</h1>

</header>

<section class="container content-section">

<div class="shop-items">

<span class="shop-item-title">Pen</span>

<img class="shop-item-image" src="pen.jpg">

<div class="shop-item-details">

<span class="shop-item-price">$0.50</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">Pencil</span>

<img class="shop-item-image" src="pencil.webp">

<div class="shop-item-details">

<span class="shop-item-price">$0.30</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">Eraser</span>

<img class="shop-item-image" src="eraser.png">

<div class="shop-item-details">

<span class="shop-item-price">$1.00</span>

<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>

</div>

</div>

</section>

<section class="container content-section">

<h2 class="section-header">CART</h2>

<select id = "province">

<option value= "saskatchewan" data-shipping-cost= "0" data-tax= "0.05" data-deal-limiter= "30" data-deal-coupon= "5">Saskatchewan</option>

<option value= "alberta" data-shipping-cost= "2" data-tax= "0.05" data-deal-limiter= "0" data-deal-coupon= "0">Alberta</option>

<option value= "manitoba" data-shipping-cost= "2" data-tax= "0.06" data-deal-limiter= "0" data-deal-coupon= "0">Manitoba</option>

</select>

<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><br><br>

</div>

<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>

</section>

<script>

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)

}

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 order_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

order_total = order_total + (price * quantity)

}

order_total = Math.round(order_total * 100) / 100

document.getElementsByClassName('cart-total-price')[0].innerText = '$' + order_total

}

document.getElementById("province").addEventListener("change", function() {

const select = document.getElementById("province")


selectedProvince = select.options[select.selectedIndex]

shippingCost = selectedProvince.dataset.shippingCost 

tax = selectedProvince.dataset.tax

dealLimiter = selectedProvince.dataset.dealLimiter,

dealCoupon = selectedProvince.dataset.dealCoupon;

});

if (selectedProvince.value === saskatchewan) {

shippingCost = "0"

tax = order_total * 0.05

dealLimiter = "30"

dealCoupon = "5"

document.getElementById("cart-subtotal-price").value = order_total + shippingCost + tax - dealCoupon

}

if (selectedProvince.value === alberta) { 

shippingCost = "2"

tax = order_total * 0.05 

dealLimiter = "0" 

dealCoupon = "0" 

document.getElementById("cart-subtotal-price").value = order_total + shippingCost + tax - dealCoupon 

} if (selectedProvince.value === manitoba) { 

shippingCost = "2" 

tax = order_total * 0.06 

dealLimiter = "0" 

dealCoupon = "0"

document.getElementById("cart-subtotal-price").value = order_total + shippingCost + tax - dealCoupon 

}

</script>

</body>

</html

Я ожидаю, что если выбран Саскачеван, он должен будет включать 5% налог с продажной цены иесли они тратят 30 долларов, они снимают 5 долларов.Если выбрать «Альберту», ​​они получат 2 доллара добавленной доставки и 5% налога с продажной цены.Если выбрать «Манитоба», они получат 2 доллара добавленной доставки и 6% налога с продажной цены.

1 Ответ

0 голосов
/ 24 июня 2019

Я ушел и потратил время на очистку вашего кода и ошибок внутри. Пожалуйста, сравните мой фрагмент ниже с вашим кодом, чтобы понять проблемы.

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

function updateCartTotal() {
    const cartItemContainer = document.getElementsByClassName('cart-items')[0],
          cartRows = cartItemContainer.getElementsByClassName('cart-row');
    let   sub_total = 0;

    for (let i = 0; i < cartRows.length; i++) {
        const cartRow = cartRows[i],
              priceElement = cartRow.getElementsByClassName('cart-price')[0],
              quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0],
              price = parseFloat(priceElement.innerText.replace('$', '')),
              quantity = quantityElement.value;

        sub_total += (price * quantity); 
    }

    const order_total = Math.round(calculateTotal(sub_total) * 100) / 100;

    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + order_total;
}

function calculateTotal(sub_total){
    const select = document.getElementById("province"),
          selectedProvince = select.options[select.selectedIndex],
          shippingCost = selectedProvince.dataset.shippingCost, 
          tax = selectedProvince.dataset.tax,
          dealLimiter = selectedProvince.dataset.dealLimiter,
          dealCoupon = selectedProvince.dataset.dealCoupon,
          appliedCoupon = parseFloat(sub_total) > parseFloat(dealLimiter) ? parseFloat(dealCoupon) : 0,
          pretotal = ((sub_total + parseFloat(shippingCost) - appliedCoupon)),
          total = pretotal + (pretotal * parseFloat(tax));

    return total;
}

document.getElementById("province").addEventListener("change", calculateTotal());
...