How to integrate JavaScript into a HTML page

Question

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.

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

How to integrate JavaScript into a HTML page

Question

1 answers

solution1
0 ACCPTED 2019-06-24 03:56:36

How to integrate JavaScript into a HTML page

Question

1 answers

solution1 0 ACCPTED 2019-06-24 03:56:36

solution1
0 ACCPTED 2019-06-24 03:56:36