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

HTML

"Register for Activities", Any hints, suggestions and comments are welcome thank you in advance for your help!!!

The total cost of the selected activities in the "Register for Activities" section should be totaled and displayed for the user.

Programming the total cost of the "Register for Activities" section requires working with the following elements:

The "Register for Activities" <fieldset> element The "Total: $" <p> element Create variables to reference the "Register for Activities" <fieldset> element and the "Total: $" <p> element. Log the variables out to the console to ensure the correct elements are being referenced. Create another variable to store the total cost of the activities and give it an initial value of 0. Use the variable for the "Register for Activities" section to listen for the change event on this element. Inside the event listener, create a variable to store a reference to the "data-cost" attribute of the event.target. The getAttribute method will be helpful here. This will provide the cost of the activity that was just clicked. But this value needs to be a number rather than a string, so you’ll need to perform a type conversion on this value before working with it. The unary plus operator, +, will be helpful here. To test this value and its type, log out the variable, and log it out a second time with the typeof operator to ensure it is a number and the value you expect it to be. You’ll have to make a selection in the "Register for Activities" section to print those log statements to the console. Still inside the event listener, create a conditional to determine if the event.target was just checked or unchecked. The checked property will be helpful here. If the event.target was checked, then add the "data-cost" of the event.target to the total variable that was created earlier. If the event.target was unchecked, then subtract the “data-cost”. To test this, you can log out the total cost variable as well as the checked property of the event.target. You’ll have to select activities to see this log statement as well. Lastly, update the innerHTML of the “Total:” <p> element with the new total cost, but mind the formatting so that the end result still resembles the initial text: "Total: $0". Now save and refresh the page, and when an activity is checked/unchecked, the total cost text below the activity section should update in real time.