如何将JavaScript集成到HTML页面中

Question

I am trying to make an HTML website that sells pens, pencils and erasers. 我正在尝试制作一个出售笔，铅笔和橡皮的HTML网站。 My issue is integrating the JavaScript into my HTML page. 我的问题是将JavaScript集成到HTML页面中。 Everything has been working properly up until the last couple chunks of JavaScript any thoughts on how I could fix this problem. 一切工作正常，直到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

I expect if Saskatchewan is chosen it should include a 5% tax onto the sales price and if they spend $30 they get $5 taken off. 我预计，如果选择萨斯喀彻温省，则应在销售价格中加上5％的税，如果他们花30美元，他们将获得5美元的收入。 If Alberta is selected they would get $2 shipping added and 5% tax added onto the sales price. 如果选择艾伯塔省，他们将获得2加元的运费和5％的税金。 If Manitoba is selected they would get $2 shipping added and 6% tax added onto the sales price. 如果选择了马尼托巴省，他们将获得2美元的运费以及6％的税费。

Answer 1

I've gone and spent the time to clean up your code and the errors within in. Please compare my snippet below with your code to understand the issues. 我已经走了，并花了一些时间来清理您的代码和其中的错误。请将下面的代码片段与您的代码进行比较，以了解问题。

You will be able to copy paste it in replacing the old code and it will work as I worked off of what you had initially. 您将能够复制粘贴它，以替换旧代码，并且在我按照最初的工作方式工作时，它将起作用。

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());

如何将JavaScript集成到HTML页面中

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-06-24 03:56:36

如何将JavaScript集成到HTML页面中

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-06-24 03:56:36

解决方案1
0 已采纳 2019-06-24 03:56:36