Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jose macedo
jose macedo
6,041 Points
Posted by jose macedo
jose macedo
6,041 Points

javascript help., shopping cart practice

ok so im trying to make it where when i click on the first button the 0 adds 1 everytime i click but it wont do it heres my code please help im really trying to learn javascript

html

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/custom.css"> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> </head> <body> <h1> shopping cart try </h1>

  <div id=first>Add To Cart</div>
  <div id=second>add to cart</div>
  <div id=third>add to cart</div>

  <div class=cart></div> 




<script type="text/javascript" src="scripts/Javascript.js"></script>

</body>

css

body { margin: 0; padding: 0; }

h1 { color: rgb(185, 191, 201); display: block; font-family: 'Lobster', cursive; font-size: 60px; margin: auto; width: 50%; }

first {

background: linear-gradient(rgb(142,41,41),rgb(242,19,19)); 
color: white;
font-family: 'Gloria Hallelujah', cursive;
font-size: 30px;
max-width: 200px;
padding-top: 3px;
position: absolute;
left: 200px;
top: 100px;
height: 50px;   
text-align: center;

}

first:hover {

cursor: pointer; }

second {

background: linear-gradient(rgb(142,41,41),rgb(242,19,19)); 
color: white;
font-family: 'Gloria Hallelujah', cursive;
font-size: 30px;
max-width: 200px;
padding-top: 3px;
position: absolute;
left: 500px;
top: 100px;
height: 50px;   
text-align: center;

}

second:hover {

cursor: pointer; }

third {

background: linear-gradient(rgb(142,41,41),rgb(242,19,19)); 
color: white;
font-family: 'Gloria Hallelujah', cursive;
font-size: 30px;
max-width: 200px;
padding-top: 3px;
position: absolute;
left: 800px;
top: 100px;
height: 50px;   
text-align: center;

}

third:hover {

cursor: pointer; } .cart { background-color: rgb(186, 186, 186); box-shadow: 3px 3px 7px; color: black; font-size: 50px; height: 90px; text-align: center; position:absolute; left: 1150px; width: 70px; } .cart p { color: black; margin-top: 10px; }

li { list-style: none; } .cart-total { position: absolute; left: 1130px; top: 180px; }

javascript

// variable for the cart assuming cart is empty var cart = 0; var blue = '<div class=cart>' + '<p>' + cart + '</p>' + '</div>'; print(blue); //variable for each product var first = [19.95, 'shoes']; var second = [15.00, 'shirt']; var third = [5.99, 'socks']; // add to cart array var addToCart = []; // product by id var firstE = document.getElementById("first"); var secondE = document.getElementById("second"); var thirdE = document.getElementById("third"); // function that adds 1 to the cart

firstE.onclick = function() { cart += 1; blue = '<div class=cart>' + '<p>' + cart + '</p>' + '</div>';

} function print(message) { document.write(message); }

2 Answers

darincarter
darincarter
4,171 Points

Start with a zero in the cart div:

<div id="first">Add To Cart</div>

<div class="cart">0</div>

Now, each time you click on <div id="first">Add To Cart</div> you need to update the value of the '.cart' div.

Something like this would work :

var cart = 0;
document.getElementById("first").onclick = function() { 
  // Increment cart
  cart++; 
  // Replace the value inside of the .cart div to whatever value is in the cart variable.
  document.querySelector('.cart').innerHTML = cart;
}
jose macedo
jose macedo
6,041 Points
jose macedo
jose macedo
6,041 Points

thanks man awesome it worked