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
A R
12,834 PointsActivities Inputs in Interactive form
I'm stuck on one part of the Unit 3 Interactive Form project; I'm not sure how to select the Date/Time for the 'Activities' inputs with jQuery. I've tried;
const timeSlot = $('input').attr('data-day-and-time');
I also have this, which is working for creating a total cost calculation.
$('.activities input').change(function(){
//total cost calculations
if ($(this).is(':checked')) {
// adds to the total cost when checked
totalCost += parseInt($(this).attr('data-cost'));
console.log($(this).prop('data-cost'));
} else if ($(this).is(':not(:checked)')){
// subtracts when unchecked
totalCost -= parseInt($(this).attr('data-cost'));
console.log(totalCost);
}
//displays cost total as it changes
$('#cost').html("<h2>Your total cost is: " +totalCost+ "</h2><br>");
})
Doing something like:
$(this).attr('data-day-and-time');
is getting me an 'undefined'; I'm not sure what's going wrong.
Piotr Manczak
Front End Web Development Techdegree Graduate 28,940 PointsDid you initialize totalCost?
A R
12,834 PointsThe HTML is as follows
<div id="registration-and-cost">
<fieldset class="activities">
<legend>Register for Activities</legend>
<label>
<input type="checkbox" name="all" data-cost="200"> Main Conference — $200
</label>
<div id="tuesday-am">
<label>
<input type="checkbox" name="js-frameworks" data-day-and-time="Tuesday 9am-12pm" data-cost="100">
JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100
</label>
<label>
<input type="checkbox" name="express" data-day-and-time="Tuesday 9am-12pm" data-cost="100">
Express Workshop — Tuesday 9am-12pm, $100
</label>
</div>
<div id="tuesday-pm">
<label>
<input type="checkbox" name="js-libs" data-day-and-time="Tuesday 1pm-4pm" data-cost="100">
JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100
</label>
<label>
<input type="checkbox" name="node" data-day-and-time="Tuesday 1pm-4pm" data-cost="100">
Node.js Workshop — Tuesday 1pm-4pm, $100
</label>
</div>
<label>
<input type="checkbox" name="build-tools" data-day-and-time="Wednesday 9am-12pm" data-cost="100">
Build tools Workshop — Wednesday 9am-12pm, $100
</label>
<label>
<input type="checkbox" name="npm" data-day-and-time="Wednesday 1pm-4pm" data-cost="100">
npm Workshop — Wednesday 1pm-4pm, $100
</label>
<div id="cost">
</div>
</div>
</fieldset>
Thanks for your time!
6 Answers
Steven Parker
229,644 PointsI found that the code works as expected when any checkbox having the attribute is selected (or un-selected).
I only saw "undefined" when the Main Conference box was checked, and that is because it has no "data-day-and-time" attribute. Did you mean to give it one?
Piotr Manczak
Front End Web Development Techdegree Graduate 28,940 PointsInstead of using jQuery you may use this. It should work nicely:
let totalActivityCost = 0;
const totalCost = document.createElement('h3');
const activitiesDiv = document.querySelector('.activities');
activitiesDiv.appendChild(totalCost);
const courseOptions = activitiesDiv.getElementsByTagName('input');
//Event listener checking checkboxes
activitiesDiv.addEventListener('change', (e) => {
if (e.target.tagName === 'INPUT') {
let checkbox = e.target;
if (checkbox.checked) {
//Checking and disabling the same time activities
let chosenData = checkbox.getAttribute('data-day-and-time');
for (let i=1; i<courseOptions.length; i++) {
let data = courseOptions[i].getAttribute('data-day-and-time');
if ( data === chosenData ) {
if (courseOptions[i] !== checkbox) {
courseOptions[i].setAttribute('disabled', true);
}
}
}
//Calculating total cost of all activities (+)
let parent = checkbox.parentNode;
let courseCost = checkbox.getAttribute('data-cost');
let courseCostNumber = parseInt(courseCost, 10);
totalActivityCost += courseCostNumber;
} else if (checkbox.checked == false) {
//Checking and enabling the same time activities
let chosenData = checkbox.getAttribute('data-day-and-time');
for (let i=1; i<courseOptions.length; i++) {
let data = courseOptions[i].getAttribute('data-day-and-time');
if ( data === chosenData && courseOptions[i] !== checkbox) {
courseOptions[i].removeAttribute('disabled');
}
}
//Calculating total cost of all activities (-)
let parent = checkbox.parentNode;
let courseCost = checkbox.getAttribute('data-cost');
let courseCostNumber = parseInt(courseCost, 10);
totalActivityCost -= courseCostNumber;
}
}
totalCost.textContent = `Total Cost: $${totalActivityCost}`;
});
A R
12,834 PointsThanks for your time, I'm hoping to complete the project with jQuery however. As I mentioned before, the total cost is running fine. I'm not sure what's going wrong with my jQery selector to get the time/date attributes from the input fields, though.
Zimri Leijen
11,835 PointsWhat is the block that contains
$(this).attr('data-day-and-time')
?
In the case of the cost it works because it's inside this block
$('.activities input').change(function(){
A R
12,834 PointsWhen I try:
console.log($(this).attr('data-day-and-time'));
inside the block, the console logs "TypeError: $(...).attr(...) is undefined". It's inside the .change event handling block I posted above.
A R
12,834 PointsI have the full project in progress linked here: https://github.com/AeronRoemer/InteractiveForm
A R
12,834 PointsI'm not sure where things went wrong, it's working now for me too. Thanks for your help.
Zimri Leijen
11,835 PointsZimri Leijen
11,835 PointsCan you show the html that comes with this?