Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Syntax and Reference Error?

jquery syntax error reference error javascript

This topic has been archived. This means that you cannot reply to this topic.
No replies to this topic

#1 Tonyobyo

Tonyobyo

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 74 posts

Posted 10 June 2016 - 12:45 PM

Hi Codecall,

 

I have a shopping cart built out in JS and jQuery that I'm trying to finish up...it was working great earlier today. I stepped out for an hour, came back, and now have errors :-P

 

Anywho, I'm receiving these 2 errors in Chrome console:

 

Uncaught SyntaxError: Unexpected token ) (js file)

Uncaught ReferenceError: obj is not defined (html file)

 

I can't seem to figure out why it isn't pulling from the object correctly as I thought everything was imported correctly from the external js file as well as public and private functions being set up properly.

 

Code is posted below...All help and assistance in figuring these errors out would really be appreciated!

 

HTML

<!doctype html>
<html>
  <head>
    <title>cart</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  </head>
  <body>

    <h1>Shopping Cart</h1>

    <div class="cart-menu" id="dialog" title="Your Cart">
      <ul class="product-list">
        <li><a href="#" class="add-to-cart" data-name="Apple" data-price="1.00">Apple</a></li>
        <li><a href="#" class="add-to-cart" data-name="Banana" data-price="1.20">Banana</a></li>
        <li><a href="#" class="add-to-cart" data-name="Pear" data-price="1.50">Pear</a></li>
        <li><a href="#" class="add-to-cart" data-name="Orange" data-price="2.00">Orange</a></li>
      </ul>
      <button id="clear-cart">Clear Cart</button>
    </div>

    <div><!-- TURN INTO Dialog -->
      <ul id="show-cart">

      </ul>
      <div>Total Cart:$<span id="total-cart"></span></div>
    </div>

    <div class="cart-banner">
			<div class="cart-details">
				<span class="cart-items">0</span>
				<br />Items in Cart
				<br />
			  <span class="total-price">X</span>
			</div>
		</div>

    <script src="devtest/js/shopping-cart.js"></script>
    <script>
      $('.add-to-cart').click(function(event){
        event.preventDefault();
        var name = $(this).attr('data-name');
        var price = Number($(this).attr('data-price'));

        obj.addItemToCart(name, price, 1);
        displayCart();
      });

      //clear cart on button click
      $('#clear-cart').click(function(event){
        obj.clearCart();
        displayCart();
      });

      function displayCart(){
        var cartArray = obj.listCart();
        var output = '';

        for(var i in cartArray){
          output += '<li>' + cartArray[i].name
            + ' <input class="item-count" type="number" data-name="'+ cartArray[i].name +'" value="'+ cartArray[i].count +'">'
            + cartArray[i].count
            /*+ ' x ' + cartArray[i].price
            + ' = $' + cartArray[i].total*/
            + ' <button class="subtract-item" data-name="'+ cartArray[i].name +'">-</button>'
            + ' <button class="plus-item" data-name="'+ cartArray[i].name +'">+</button>'
            + ' <button class="delete-item" data-name="'+ cartArray[i].name +'">X</button>'
            + '</li>';
        }

        $('#show-cart').html(output);
        $('#count-cart').html(obj.countCart());
        $('#total-cart').html(obj.totalPrice() );
        $('.cart-items').html(obj.countCart());
        $('.total-price').html(obj.totalPrice() );
      };

      //Removes all items of a single category when 'x' button is clicked
      $('#show-cart').on('click', '.delete-item', function(event){
        var name = $(this).attr('data-name');
        obj.removeItemFromCartAll(name);
        displayCart();
      });

      //Decrements an item category by 1 when '-' button is clicked
      $('#show-cart').on('click', '.subtract-item', function(event){
        var name = $(this).attr('data-name');
        obj.removeItemFromCart(name);
        displayCart();
      });

      //Increments an item category by 1 when '+' button is clicked
      $('#show-cart').on('click', '.plus-item', function(event){
        var name = $(this).attr('data-name');
        obj.addItemToCart(name, 0, 1);
        displayCart();
      });

      $('#show-cart').on('change', '.item-count', function(event){
        var name = $(this).attr('data-name');
        var count = Number($(this).val());
        obj.setCountForItem(name, count);
        displayCart();
      });

      displayCart();

    </script>
  </body>
</html>

Javascript

var shoppingCart = (function () {
//--------------------------------
	//Private Methods & Properties
	var cart = [];

	function Item(name, price, count) {
		this.name = name;
		this.price = price;
		this.count = count;
	}

	//Saves cart to local storage
	function saveCart(){
		localStorage.setItem('shoppingCart', JSON.stringify(cart));
	}

	//Loads cart from local storage
	function loadCart(){
		cart = JSON.parse(localStorage.getItem('shoppingCart'));
	}

	loadCart();

	//-----------------------------
	//Public Methods & Properties
	var obj = {};

	//Adds single item to cart
	obj.addItemToCart = function(name, price, count){
		for (var i in cart){
			if(cart[i].name === name){
				cart[i].count += count;
				saveCart();
				return;
			}

			var item = new Item(name, price, count);
			cart.push(item);
			saveCart();
		};

		//Sets item amount for input field manually instead of using increment and decrement buttons
		obj.setCountForItem = function(name, count){
			for(var i in cart){
				if(cart[i].name === name){
					cart[i].count = count;

					if(cart[i].count === 0){
						cart.splice(i, 1);
					}
					break;
				}
			}
			saveCart();
		};

		//Removes single item from cart
		obj.removeItemFromCart = function(name){
			for(var i in cart){
				if(cart[i].name === name){
					cart[i].count--;

					if(cart[i].count === 0){
						cart.splice(i, 1);
					}
					break;
				}
			}
			saveCart();
		};

		//Removes all of a single kind of item from cart
		obj.removeItemFromCartAll = function(name){
			for(var i in cart){
				if(cart[i].name === name){
					cart.splice(i, 1);
					break;
				}
			}
			saveCart();
		};

		//Clears all items from cart
		obj.clearCart = function(){
			cart = [];
			saveCart();
		};

		//Counts all items in cart
		obj.countCart = function(){
			var totalCount = 0;

			for(var i in cart){
				totalCount += cart[i].count;
			}
			return totalCount;
		};

		//Adds up total price of all items in cart
		obj.totalPrice = function(){
			var totalCost = 0;
			for(var i in cart){
				totalCost += cart[i].price * cart[i].count;
			}
			return totalCost.toFixed(2);
		};

		//Lists number of items in cart
		obj.listCart = function(){
			var cartCopy = [];

			for(var i in cart){
				var item = cart[i];
				var itemCopy = {};

				for(var p in item){
					itemCopy[p] = item[p];
				}
				itemCopy.total = (item.price * item.count).toFixed(2);
				cartCopy.push(itemCopy);
			}
			return cartCopy;
		};

	return obj;
})();