问题
I am trying to make an HTML website that sells pens, pencils and erasers. My issue is integrating the JavaScript into my HTML page. Everything has been working properly up until the last couple chunks of JavaScript any thoughts on how I could fix this problem.
<!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. If Alberta is selected they would get $2 shipping added and 5% tax added onto the sales price. If Manitoba is selected they would get $2 shipping added and 6% tax added onto the sales price.
回答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());
来源：https://stackoverflow.com/questions/56690397/how-to-integrate-javascript-into-a-html-page