How do i change this spans content when an event fires?

Hi, i want to change the innerHTML of the “total” span in the top right corner so that when you click the “addToCart” icons its number increases by 1 each time you click it.

here is my code:

Thank you so much!

Please see these two JQuery lessons and you can see how to apply an “add to cart” button and actually have it work.

So far so good. You have a solid foundation and everything looks good.

/* $(“addtocartbuttongoeshere”).on(“click”, function(){
$(".message").html(“Here is the message”);

Just store a variable for the amount of items added to cart and viola!

You have a couple of issues with your current Codepen code.

#1) You need to add the Font Awesome library to the external CSS files, so there is a cart on which to click.

#2) In the following line of code, you do not need the #, because it is implied by the getElementById:

var total = document.getElementById("#total");

#3) For this last problem, I am just going to tell you what does not work and why and give you a hint of what you should do. The 1st line of the following code assigns the current value of the inner html of the span element with id=“total” to a variable called totalValue. The second line does nothing. HINT: What variable is currently tracking the number of times an Add to Cart icon has been clicked? You need to assign that variable’s value to the inner html of the span element with id=“total”.

    var totalValue = total.innerHTML;