Develop Reference

JavaScript Uncaught TypeError - Shopping Cart Total

I'm finishing the project and I'm struggling with couple things:
1 Shopping Cart in javascript
I expected <p class="subTotal">$ 0</p> to update after adding, or deleting elements from the shopping cart. Instead, when I add element to the shopping cart, p.subTotal updates 2x the price of dish.
The next one is deleting elements from the shopping cart. When I do that, the console return this:
Console screenshot #1
2 Removing the object
To remove object from the shopping cart I had to select parent of the parent of the button.
Inside the button I've put the svg icon. Somehow, when I click on svg icon, javascript code selects parent of the parent of the svg instead of the button's.
3 Adding dishes to the shopping cart
I've put <a href="#" class="addToCart"> inside of <div class="food">.
This action results in console, showing me another error:
Console screenshot #2
If You can answer even one question I will really appreciate that.
I have only few hours left to finish it.
Code:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready);
} else {
ready();
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('trash');
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i];
button.addEventListener('click', removeCartItem);
}
var quantityInputs = document.getElementsByClassName('quantity');
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i];
input.addEventListener('change', quantityChanged);
}
var addToCart = document.getElementsByClassName('addToCart');
for (var i = 0; i < addToCart.length; i++) {
var button = addToCart[i];
button.addEventListener('click', addToCartClicked);
}
}
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;
var title = shopItem.getElementsByClassName('name')[0].innerText;
var price = shopItem.getElementsByClassName('price')[0].innerText;
var imageSrc = shopItem.getElementsByClassName('foodImg')[0].src;
addItemToCart(title, price, imageSrc);
updateCartTotal();
}
function addItemToCart(title, price, imageSrc) {
var product = document.createElement('div');
product.classList.add('product');
var basket = document.getElementsByClassName('basket')[0];
var productContents = `
<div class="product">
<div class="productInfo">
<div class="productName">
<img src="${imageSrc}" alt="Spicy seasoned seafood noodles">
<div>
<p class="productTitle">${title}</p>
<p class="money">${price}</p>
</div>
</div>
<input class="quantity" type="text" value="1">
<p class="cash">${price}</p>
</div>
<div class="note">
<input type="text" placeholder="Order Note...">
<button class="trash"><svg width="24" height="24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.8789 8.71882L18.9784 8.72017C19.3475 8.75069 19.6304 9.05716 19.65 9.42605L19.6405 9.63174L19.326 13.483L18.9961 17.2414C18.9263 17.9917 18.8638 18.6245 18.8099 19.1227C18.6225 20.8588 17.4955 21.9323 15.7966 21.9641C13.1494 22.013 10.6048 22.0125 8.13373 21.9591C6.48398 21.9244 5.37366 20.8393 5.18955 19.1297L5.0623 17.8702L4.83994 15.427L4.61216 12.7461L4.35172 9.52788C4.31935 9.11498 4.61951 8.75335 5.02215 8.72016C5.39123 8.68973 5.7183 8.94584 5.79519 9.30677L5.82511 9.60173L6.06966 12.6187L6.33669 15.7459C6.45646 17.0996 6.56034 18.1952 6.64346 18.9648C6.74838 19.939 7.26138 20.4404 8.16411 20.4593C10.6159 20.5124 13.1415 20.5129 15.7701 20.4643C16.7277 20.4464 17.2488 19.9499 17.356 18.9574L17.4827 17.7046C17.5198 17.3185 17.5594 16.8923 17.6013 16.4293L17.8686 13.3538L18.1906 9.4075C18.2204 9.02902 18.5192 8.7389 18.8789 8.71882ZM3.73139 6.98918C3.32745 6.98918 3 6.65338 3 6.23916C3 5.85945 3.27515 5.54564 3.63214 5.49597L3.73139 5.48913H6.91772C7.29636 5.48913 7.62785 5.23928 7.74642 4.87929L7.77543 4.76813L8.02304 3.50533C8.24111 2.66897 8.9492 2.07349 9.779 2.00633L9.93592 2H14.0639C14.9075 2 15.6523 2.54628 15.9391 3.39039L15.9874 3.55209L16.2243 4.76783C16.2987 5.14872 16.6025 5.4332 16.9701 5.48177L17.0821 5.48913H20.2686C20.6725 5.48913 21 5.82493 21 6.23916C21 6.61887 20.7248 6.93267 20.3679 6.98234L20.2686 6.98918H3.73139ZM14.0639 3.50006H9.93592C9.7307 3.50006 9.54829 3.62322 9.47252 3.77803L9.44682 3.84604L9.20979 5.06238C9.1808 5.21084 9.13879 5.3538 9.08512 5.49012L14.9148 5.49031C14.8813 5.40526 14.8523 5.31763 14.8282 5.22768L14.79 5.06208L14.5636 3.8928C14.5107 3.68991 14.3473 3.54138 14.1502 3.50742L14.0639 3.50006Z" />
</svg></button>
</div>
</div>`;
product.innerHTML = productContents;
basket.append(product);
product
.getElementsByClassName('trash')[0]
.addEventListener('click', removeCartItem);
product
.getElementsByClassName('quantity')[0]
.addEventListener('change', quantityChanged);
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('basket')[0];
var products = cartItemContainer.getElementsByClassName('product');
var total = 0;
for (var i = 0; i < products.length; i++) {
var product = products[i];
var priceElement = product.getElementsByClassName('money')[0];
var quantityElement = product.getElementsByClassName('quantity')[0];
var price = parseFloat(priceElement.innerText.replace('$', ''));
var quantity = quantityElement.value;
total = total + price * quantity;
}
total = Math.round(total * 100) / 100;
document.getElementsByClassName('subTotal')[0].innerText = '$ ' + total;
}
// Date in header
var dt = new Date();
document.getElementById('datetime').innerHTML = dt.toLocaleDateString();
<div id="foodCard">
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 1.png" alt="Spicy seasoned seafood noodles">
<div class="text">
<p class="name">Spicy seasoned seafood noodles</p>
<div>
<p class="price">$ 2.29</p>
<p class="availability">20 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 2.png" alt="Salted Pasta with mushroom sauce">
<div class="text">
<p class="name">Salted Pasta with mushroom sauce</p>
<div>
<p class="price">$ 2.69</p>
<p class="availability">11 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 3.png" alt="Beef dumpling in hot and sour soup">
<div class="text">
<p class="name">Beef dumpling in hot and sour soup</p>
<div>
<p class="price">$ 2.99</p>
<p class="availability">16 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
<div class="food">
<a href="#" class="addToCart">
<div class="bg">
<img class="foodImg" src="style/img/Image 5.png" alt="Spicy seasoned seafood noodles">
<div class="text">
<p class="name">Spicy seasoned seafood noodles</p>
<div>
<p class="price">$ 2.29</p>
<p class="availability">20 Bowls available</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<section id="order">
<div id="container">
<header>
<h2>Orders #34562</h2>
<div id="selector">
<button class="active">Dine in</button>
<button>To Go</button>
<button>Delivery</button>
</div>
<div id="description">
<p>Item</p>
<p>Qty</p>
<p>Price</p>
</div>
</header>
<div class="basket">
</div>
<div id="bottom">
<div id="total">
<div id="discount">
<p>Discount</p>
<p>$0</p>
</div>
<div id="subTotal">
<p>Sub total</p>
<p class="subTotal">$ 0</p>
</div>

I couldn't have time to go through the full code, but I had an observation. document.getElementsByClassName('subTotal')[0].innerText = '$ ' + total;, is the getElementsByClassName('subTotal') returning a element or just returning undefined? Because, you can't access innerHTML from undefined.
Also, is shopItem.getElementsByClassName('foodImg')[0] not undefined? If it is undefined, then you will get src of undefined error. Is there an element with class name foodImg?

how to prevent adding the same product 2 times in the shopping cart

Can you please tell me what i did wrong in js code ...I'm trying to prevent adding the the same product twice by clicking 'add to cart' button then alert him that this product was already added in the shopping cart
JS code:
function ready() {
//REMOVE THE SHOPPING ITEM FROM THE CART
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('add-to-cart')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
}
function addToCartClicked(event) {
event.preventDefault()
var button = event.target
var shopItem = button.parentElement.parentElement.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-title')[0].innerText
var price = shopItem.getElementsByClassName('new-price')[0].innerText
var image = shopItem.getElementsByClassName('img')[0].src
addItemToCart(title, price, image)
}
//Add the product to the shopping Cart
function addItemToCart(title, price, image) {
var cartRow = document.createElement('div')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemsNames = cartItems.getElementsByClassName('cart-title')
//prevent the same product to be added twice
for (var i = 0; i < cartItemsNames.length; i++) {
if (cartItemsNames[i].innerText == title) {
alert('error')
return
}
}
var cartRowContents = `
<div class="sin-itme clearfix cart-row">
<i class="mdi mdi-close btn-danger"></i>
<a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a>
<div class="menu-cart-text">
<h5 class="cart-title">${title}</h5>
<span class="product-color">Color : Black</span>
<span class="product-size">Size : SL</span>
<label for="quantity" class="quantity-text">Quantity: </label>
<input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">
<strong class="price">${price}</strong>
</div>
</div>
`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
}
<html>
<head>
<title>shopping cart</title>
</head>
<body>
<div class="cart-items">
<div class="sin-itme clearfix cart-row">
<i class="mdi mdi-close btn-danger"></i>
<a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a>
<div class="menu-cart-text">
<h5 class="cart-title">product1</h5>
<label for="quantity" class="quantity-text">Quantity: </label>
<input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">
<strong class="price">$12.00</strong>
</div>
</div>
</div>
<div class="row shop-item">
<div class="col-xs-12 col-md-4">
<div class="list-img">
<div class="product-img">
<div class="pro-type">
<span>new</span>
</div>
<img src="img/products/13.jpg" class="img" alt="Product Title" />
</div>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="list-text">
<h3 class="shop-title">product1</h3>
<h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5>
<div class="list-btn">
add to cart
</div>
</div>
</div>
</div>
</body>
</html>
Here is the code what i did...can you please tell me what i did wrong in JS ?...thanks

ready function in code snippet not run,you have to call it at the bottom.
in addToCartClicked function, just use document instead shopItem
function addToCartClicked(event) {
event.preventDefault()
var title = document.getElementsByClassName('shop-title')[0].innerText
var price = document.getElementsByClassName('new-price')[0].innerText
var image = document.getElementsByClassName('img')[0].src
addItemToCart(title, price, image)
}
in addItemToCart function just use document instead cartItems
function addItemToCart(title, price, image) {
var cartRow = document.createElement('div')
var cartItemsNames = document.getElementsByClassName('cart-title')
//prevent the same product to be added twice
for (let i = 0; i < cartItemsNames.length; i++) {
if (cartItemsNames[i].innerText == title) {
alert('error')
return
}
}
// ....
// ....
}
The above changes are just to make your code clearer.
function ready() {
//REMOVE THE SHOPPING ITEM FROM THE CART
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('add-to-cart')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
}
function addToCartClicked(event) {
event.preventDefault()
console.log(123)
var title = document.getElementsByClassName('shop-title')[0].innerText
var price = document.getElementsByClassName('new-price')[0].innerText
var image = document.getElementsByClassName('img')[0].src
addItemToCart(title, price, image)
}
//Add the product to the shopping Cart
function addItemToCart(title, price, image) {
var cartRow = document.createElement('div')
var cartItemsNames = document.getElementsByClassName('cart-title')
//prevent the same product to be added twice
for (let i = 0; i < cartItemsNames.length; i++) {
if (cartItemsNames[i].innerText == title) {
alert('error')
return
}
}
var cartRowContents = `
<div class="sin-itme clearfix cart-row">
<i class="mdi mdi-close btn-danger"></i>
<a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a>
<div class="menu-cart-text">
<h5 class="cart-title">${title}</h5>
<span class="product-color">Color : Black</span>
<span class="product-size">Size : SL</span>
<label for="quantity" class="quantity-text">Quantity: </label>
<input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">
<strong class="price">${price}</strong>
</div>
</div>
`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
}
ready()
<html>
<head>
<title>shopping cart</title>
</head>
<body>
<div class="cart-items">
<div class="sin-itme clearfix cart-row">
<i class="mdi mdi-close btn-danger"></i>
<a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a>
<div class="menu-cart-text">
<h5 class="cart-title">product1</h5>
<label for="quantity" class="quantity-text">Quantity: </label>
<input type="text" class="cart-quantity-input" name="quantity" type="number" value="1">
<strong class="price">$12.00</strong>
</div>
</div>
</div>
<div class="row shop-item">
<div class="col-xs-12 col-md-4">
<div class="list-img">
<div class="product-img">
<div class="pro-type">
<span>new</span>
</div>
<img src="img/products/13.jpg" class="img" alt="Product Title" />
</div>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="list-text">
<h3 class="shop-title">product1</h3>
<h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5>
<div class="list-btn">
add to cart
</div>
</div>
</div>
</div>
</body>
</html>

Pure Javascript display div based on Menu Item Clicked?

I just need some advice with my current code. I am trying to display a different div depending on the menu item clicked. I was thinking theoretically using some kind of indexing method. i think the if statement i am using for once does not work but also seems a little horrible in terms of coding.
anyway what do you think?
/**
* Lets get Menu container
*/
var menu = document.getElementById("configurator-menu");
/**
* Set Current Tab and Store which tab is Active
*/
var navitem = menu.querySelector(".configurator-menuitems div");
navitem.className += " " + "activeTab";
/**
* Add click events to Menu Tabs
*/
var tabs = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
/**
* Tabs Logic
*/
function displayPage() {
var items = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("activeTab");
}
this.className += " " + "activeTab";
if (this.classList.contains("mainMenu1")) {
var item = document.getElementByClassName("appCanvas1");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu2")) {
var item = document.getElementByClassName("appCanvas2");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu3")) {
var item = document.getElementByClassName("appCanvas3");
item.style.display = "block";
}
}
<div id="configurator-menu" class="appMenu" style="background-color:#001A35;">
<div class="appLogo">
Logo Here
</div>
<hr class="no-margin" />
<div class="configurator-menuitems">
<div class="mainMenu-btn mainMenu1">Shape</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu2">Size</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu3">Color</div><hr class="no-margin" />
</div>
<div class="menuspacer"></div><hr class="no-margin" />
<div class="currentSettings">
<p class="settings-title">Your Selection</p>
<p class="variant-config">Shape: </p>
<p class="variant-config">Colors: </p>
<p class="variant-config">Size: </p>
<p class="variant-config">Quantity: </p>
<p class="variant-config">Total Price: </p>
</div>
</div>
<div class="canvas-wrapper">
<div class="appCanvas1" style="background-color:#e7e7e7;">
<div class="shape-selection-bar">
<div class="shape-selector"><img src="'.plugins_url("pentant_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("pendant_cyl.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_cyl.png", __FILE__).'" alt="" /></div>
</div>
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas2" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas3" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
</div>

js slideshow classname property of null

I am making a slideshow for a website i am making.
but my slideshow keeps getting error
Cannot set property 'className' of null
here is my code:
window.onload=function(){
var slideshow = document.getElementsByClassName('slideshow').item(0),
train = slideshow.getElementsByClassName('train').item(0),
lists = document.getElementsByClassName('btns').item(0).getElementsByClassName('btn'),
currentSlide = 0;
(go2slide = function (n) {
if(n>lists.length-1) n=0;
if(n<0) n=lists.length-1;
train.style.left=(-310*n)+'px';
lists.item(currentSlide).className = '';
lists.item(n).className = 'active';
currentSlide=n;
})(0); // set active of first li
nextSlide = function(){
go2slide(currentSlide+1);
}
prvSlide = function(){
go2slide(currentSlide-1);
}
var autoPlayIv = false;
(autoPlayStart = slideshow.onmouseout = function(){
if(autoPlayIv) return;
autoPlayIv = setInterval(nextSlide, 2000);
})(); // run auto play
autoPlayStop = slideshow.onmouseover = function(){
clearInterval(autoPlayIv);
autoPlayIv = false;
}
slideshow.getElementsByClassName('next').item(0).onclick=nextSlide;
slideshow.getElementsByClassName('previous').item(0).onclick=prvSlide;
for (var i=0; i<lists.length; i++) {
(function(j){
lists.item(j).onclick=function(){
go2slide(j);
}
})(i);
}
}
i DO have a li tag classes as btn and a btns ul.
its item(0).
and here is the html related to it
<div class="body">
<div class="slide">
<div class="s1">
<div class="slideshow">
<div class="train">
<script type="text/javascript">
var slidesLen = 3;
for(var i=1;i<=slidesLen;i++){
document.write("<div style=\"background-image:url('../images/pic"+i+".jpg');\"></div>");
}
</script>
</div>
<div class="previous"></div>
<div class="next"></div></div>
<ul class="btns">
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</ul>
</div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5">
<div class="I"></div>
<div class="II"></div>
<div class="III"></div>
</div>
</div>
<div class="text"></div>
</div>
and of course its only the body.php i am posting here. I don't think header.php which contains the menu and the css and js association tags are needed. tell me if it is

Jquery basic: How to randomize this array and still call all the parameters?

I have 2 divs, #col1 and #col2, that I need to generate some divs with fruit names in there.
So far I have:
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'"></div>').appendTo('#col1').doSomething();
$('<div id="'+fruitArray[fruit]+'"></div>').appendTo('#col2').doSomething();
}
Which turns out like:
<div id="#col1">
<div class="apples"></div>
<div class="banana"></div>
<div class="orange"></div>
<div class="grapes"></div>
</div>
<div id="#col2">
<div id="apples"></div>
<div id="banana"></div>
<div id="orange"></div>
<div id="grapes"></div>
</div>
How do I randomize the array so it looks something like:
<div id="#col1">
<div class="orange"></div>
<div class="apples"></div>
<div class="orange"></div>
<div class="grapes"></div>
</div>
<div id="#col2">
<div id="grapes"></div>
<div id="orange"></div>
<div id="apples"></div>
<div id="banana"></div>
</div>

Simple shuffle extension:
Array.prototype.shuffle = function() {
var shuffledArray = [];
while (this.length) {
shuffledArray.push(this.splice(Math.random() * this.length, 1)[0]);
}
while (shuffledArray.length) {
this.push(shuffledArray.pop());
}
return this;
}
Use it like
var fruitArray = ['apples','banana','orange','grapes'].shuffle();
for (var i = 0; i < fruitArray.length; i++) {
$('<div class="'+fruitArray[i]+'"></div>').appendTo('#col1').doSomething();
$('<div id="'+fruitArray[i]+'"></div>').appendTo('#col2').doSomething();
}