I'm building a shopping cart with Vanilla JavaScript and i'm trying with Console.Log to show price of product "$19.99" when i click button to remove the product, but it's not showing nothing in Console.Log and i think problem is with html but i cannot find it, any idea?
<div class="click-cart">
<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="olp">
<div class="lakn">
<img class="shop-item-cart" src="https://cdn.thewirecutter.com/wp-content/uploads/2018/04/canon-dslrs-march-2018-2x1-lowres3496.jpg">
<span class="shop-title">Album 1</span>
<span class="shop-price">$19.99</span>
<input class="quantity-input" type="number" value="1">
<button class="delete-cart">X</button>
</div></div>
<div class="clear-checkout">
<button class="checkout">Checkout</button>
<button class="clear-cart">Clear Cart</button></div>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$10.79</span>
</div>
for (let i = 0; i < removeCartItemButtons.length; i++) {
let button = removeCartItemButtons[i]
button.addEventListener('click', function (event) {
let buttonCliked = event.target
buttonCliked.parentElement.parentElement.remove()
updateCartTotal ()
})
}
function updateCartTotal () {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelector('.cart-row');
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelector('.quantity-input');
let price = priceElement.innerText
console.log(price)
}
}```
<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>
The shop-price element is not in the cart-row div.
Furthermore, your for loop would not run because cartRows is not an array, instead it is a single HTMLElement with a length of undefined, use cartItemContainer.querySelectorAll('.cart-row') to get an interable NodeList instead.
Additionally, since you delete the element before you use the updateCartTotal function it is necessary to have a price variable preset to 0.
function updateCartTotal () {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelectorAll('.cart-row');
let price = 0;
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelector('.quantity-input');
if (priceElement) {
price += Number(priceElement.innerText.replace('$',''));
}
console.log(price);
}
}
Related
I don't know javascript but I want to use, search on my site. I found a good example on stackoverflow link
I joined all the parts and received the following code:
function SearchName() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var nodes = document.getElementsByClassName('target');
var card = document.getElementsByClassName('card');
for (i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.toLowerCase().includes(filter)) {
card[i].style.display = "block";
} else {
card[i].style.display = "none";
}
}
}
<input id="Search" onkeyup="SearchName();" class="form-control dsh191" type="text" placeholder="search" name="" />
<div class="d-flex m-0 p-0">
<div class="card">
Abc Def
<p class="dsh185">Code: <span class="code">1234</span></p>
</div>
<div class="card">
Qwr Tyu
<p class="dsh185">Code: <span class="code">5678</span></p>
</div>
<div class="card">
Iop Klj
<p class="dsh185">Code: <span class="code">9000</span></p>
</div>
</div>
Everything works fine, but I need to search by class = 'code'. My question is:
How do I search for Qwr Tyu and <p class="dsh185">Code: <span class="code">5678</span></p> ? What did I try?
I duplicated javascript function code and changed the class from target to code, but nothing was received, now the search goes after the first function in the input.
I added a new function to the input SearchCode();;
In <span>5678</span> I added class="code"
And as I said above I dubbed javascript code and I changed 2 variables: from nodes to code new class name and from card to profilecard, only the new variable but the html tag remains the same.
function SearchName() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var nodes = document.getElementsByClassName('target');
var card = document.getElementsByClassName('card');
for (i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.toLowerCase().includes(filter)) {
card[i].style.display = "block";
} else {
card[i].style.display = "none";
}
}
}
function SearchCode() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var code = document.getElementsByClassName('code');
var profilecard = document.getElementsByClassName('card');
for (i = 0; i < code.length; i++) {
if (code[i].innerText.toLowerCase().includes(filter)) {
profilecard[i].style.display = "block";
} else {
profilecard[i].style.display = "none";
}
}
}
<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />
<div class="d-flex m-0 p-0">
<div class="card">
Abc Def
<p class="dsh185">Code: <span class="code">1234</span></p>
</div>
<div class="card">
Qwr Tyu
<p class="dsh185">Code: <span class="code">5678</span></p>
</div>
<div class="card">
Iop Klj
<p class="dsh185">Code: <span class="code">9000</span></p>
</div>
</div>
My question: How can I search the site after 2 html tags (Search by text in tags)?
Any idea how I can change the code, or where I went wrong etc ... Thanks
one idea can be to use innerText on parent tag profileCard
function SearchName() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var nodes = document.getElementsByClassName('target');
var card = document.getElementsByClassName('card');
for (i = 0; i < nodes.length; i++) {
if (nodes[i].innerText.toLowerCase().includes(filter)) {
card[i].style.display = "block";
} else {
card[i].style.display = "none";
}
}
}
function SearchCode() {
var input = document.getElementById("Search");
var filter = input.value.toLowerCase();
var code = document.getElementsByClassName('code');
var profilecard = document.getElementsByClassName('card');
for (i = 0; i < code.length; i++) {
if (profilecard[i].innerText.toLowerCase().includes(filter)) {
profilecard[i].style.display = 'block';
} else {
profilecard[i].style.display = 'none';
}
}
}
<input id="Search" onkeyup="SearchName(); SearchCode();" class="form-control dsh191" type="text" placeholder="search" name="" />
<div class="d-flex m-0 p-0">
<div class="card">
Abc Def
<p class="dsh185">Code: <span class="code">1234</span></p>
</div>
<div class="card">
Qwr Tyu
<p class="dsh185">Code: <span class="code">5678</span></p>
</div>
<div class="card">
Iop Klj
<p class="dsh185">Code: <span class="code">9000</span></p>
</div>
</div>
I am trying to get the value of the quantityElement so i can make the price change decrease/increase when the quantity goes down/up but i order for this to work i need to get the value of the quantityElement which keeps coming back as undefined in the console.
var removeCartitemButtons = document.getElementsByClassName('remove-btn')
console.log(removeCartitemButtons)
for (var i = 0; i < removeCartitemButtons.length; i++) {
var button = removeCartitemButtons[i]
button.addEventListener('click', function(event) {
console.log('clicked')
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
})
}
// Update Cart total price
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-info')
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('product-price')[0]
var quantityElement = cartRow.getElementsByClassName('quantity-value')
[0]
var price = parseFloat(priceElement.innerText.replace('R', ''))
var quantity = quantityElement.value
console.log(price * quantity)
}
}
<td>
<div class="cart-items">
<div class="cart-info">
<img src="images/men3(balenciaga).png" width="250px">
<span class="product-price">R7400</span>
</div>
<span class="cart-item-title">Balenciaga Speed High</span>
</div>
<br>
<button class="remove-btn" type="button">Remove</button>
</div>
</div>
</div>
</td>
<td><input class="quantity-value" type="number" value="1"></td>
</tr>
You are trying to get 'quantity-value' field inside cartRow, but it does not exist inside the 'cart-info' div, because of which you are getting this value as undefined.
var quantityElement = cartRow.getElementsByClassName('quantity-value')[0]
Your html should probably be like below:
var removeCartitemButtons = document.getElementsByClassName('remove-btn')
console.log(removeCartitemButtons)
for (var i = 0; i < removeCartitemButtons.length; i++) {
var button = removeCartitemButtons[i]
button.addEventListener('click', function(event) {
console.log('clicked')
var buttonClicked = event.target
buttonClicked.parentElement.remove()
// updateCartTotal()
})
}
<td>
<div class="cart-items">
<div class="cart-info">
<img src="images/men3(balenciaga).png" width="450px">
<span class="product-price">R7401</span>
<input class="quantity-value" type="number" value="1">
</div>
<span class="cart-item-title">Balenciaga Speed High1</span>
<button class="remove-btn" type="button">Remove1</button>
</div>
</td>
<td>
<div class="cart-items">
<div class="cart-info">
<img src="images/men3(balenciaga).png" width="450px">
<span class="product-price">R7402</span>
<input class="quantity-value" type="number" value="2">
</div>
<span class="cart-item-title">Balenciaga Speed High2</span>
<button class="remove-btn" type="button">Remove2</button>
</div>
</td>
<td>
<div class="cart-items">
<div class="cart-info">
<img src="images/men3(balenciaga).png" width="450px">
<span class="product-price">R7403</span>
<input class="quantity-value" type="number" value="3">
</div>
<span class="cart-item-title">Balenciaga Speed High3</span>
<button class="remove-btn" type="button">Remove3</button>
</div>
</td>
I'm building a shopping cart using javascript and html with the goal of merging this into a database after more progress. I have the following HTML for radio buttons:
<!--------------------------------HTML START---------------------------------->
<div class="shop-item">
<span class="shop-item-title">Steak</span>
<div class="shop-item-details">
<span class="shop-item-price">$12.99</span>
<button class="modalbtn-primary shop-item-button-header" type="button" data-modal-target="#modal">ADD TO CART</button> <!--btn btn-primary shop-item-button--->
<div class="modal" id="modal">
<div class="title">How would you like it cooked?
<div class="shop-items">
<div class="shop-item">
<div data-toggle="buttons">
<div class="row">
<input type="radio" class="shop-item-temp" id="temp" name = "temp" value="Wrong">Rare
<input type="radio" class="shop-item-temp" id="temp" name = "temp" value="Medium Rare">Medium Rare
<input type="radio" class="shop-item-temp" id="temp" name = "temp" value="Medium" checked>Medium
<input type="radio" class="shop-item-temp" id="temp" name = "temp" value="Medium Well">Medium Well
<input type="radio" class="shop-item-temp" id="temp" name = "temp" value="Well">Well
</div>
</div>
<!--------------------------------HTML END---------------------------------->
//Then I have the following Javascript to try to get the values
//start javascript for click event to add items to cart. Popup for selecting temperature of meat
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
//var temp = shopItem.getElementsByClassName('shop-item-temp')[0].checked -- this works but only adds the 1st value Rare
document.getElementById('temp').innerHTML = "";
var temp = document.getElementsByTagName("input");
for(i = 0; i < temp.length; i++) {
if(temp[i].type="radio") {
if(temp[i].checked)
document.getElementById("temp").innerHTML
+= temp[i].name +
+ temp[i].value + "<br>";
}
}
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
addItemToCart(title,temp, price)
updateCartTotal()
}
function addItemToCart(title, temp, price) {//temp, , , 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
}
}
//end javascript
I get the Steak, price and quantity but I get [object HTMLCollection] instead of the temperature of the steak.
Any help would be appreciated. Thanks!
The "temperature" is the attribute "value" of your radio items.
<input type="radio" class="shop-item-temp" id="temp" name = "temp" value="Medium Rare">Medium Rare
Right after checking that the attribute is "checked" if (temp[i].checked) you can have your temperature like this:
temperature = temp[i].getAttribute("value");
Extra remark, on my code I would prefer using forEach for this kind of for loop.
When I click on the checkbox at the top, it puts a '0' in the total box, so I know that it is connected correctly, however I think there is a problem in the logic in the loop. One of the elements in html looks like this.
const form = document.getElementById('bookingForm');
const total = document.getElementById('total');
const checkboxes = document.querySelectorAll('input[data-price][type=checkbox]');
const cbamount = checkboxes.length;
document.getElementsByName('event[]')[0].onclick = function() {
totalPrice()
};
function totalPrice() {
let totalprice = 0;
for (let i = 0; i < cbamount; i++) {
const box = checkboxes[i];
if (box.checked) {
box.dataset.price = totalprice + box.dataset.price;
} //if
} //for
document.getElementsByName("total")[0].value = totalprice;
}
<span class="eventTitle">Carmen </span>
<span class="eventStartDate">2020</span>
<span class="eventEndDate">2020</span>
<span class="catDesc">T</span>
<span class="venueName">Mill </span>
<span class="eventPrice">3</span>
<span class="chosen"><input type="checkbox" name="event[]" value="11" data-price="35.00"></span>
<section id="Cost">
<h3>Total</h3>
Total <input type="text" name="total" size="20" readonly="">
</section>
You have no total in the code you provided.
I would personally use ID when only having one element and if more, use relative addressing and/or delegation
const form = document.getElementById('booking');
const total = document.getElementById('total');
document.getElementById("booking").addEventListener("click", function(e) {
if (e.target.name === "event[]") {
let totalprice = 0;
[...document.querySelectorAll('input[data-price][type=checkbox]')].forEach(function(box) {
if (box.checked) {
totalprice += +box.dataset.price;
} //if
})
document.querySelector("[name=total]").value = totalprice.toFixed(2);
}
})
<form id="booking" method="get">
<section id="book">
<h2>Select Events</h2>
<div class="item">
<span class="eventTitle">Carmen </span>
<span class="eventStartDate">2020</span>
<span class="eventEndDate">2020</span>
<span class="catDesc">T</span>
<span class="venueName">Mill </span>
<span class="eventPrice">3</span>
<span class="chosen"><input name="event[]" type="checkbox" value="11" data-price="35.00"></span>
</div>
<div class="item">
<span class="eventTitle">Ash</span>
<span class="eventStartDate">202</span>
<span class="eventEnd">2020-12-31</span>
<span class="catD">Exhib</span>
<span class="venueNa">The Biy</span>
<span class="eventPr">0.00</span>
<span class="chosen"><input type="checkbox" name="event[]" value="17" data-price="10.00"></span>
</div>
</section>
<section id="Cost">
<h3>Total</h3>
Total <input type="text" name="total" size="20" readonly="">
</section>
</form>
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>HOME</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.
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());