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

A R
A R
12,834 Points

Activities 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.

Can you show the html that comes with this?

A R
A R
12,834 Points

The 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
Steven Parker
229,981 Points

I 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,085 Points

Instead 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
A R
12,834 Points

Thanks 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.

What 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
A R
12,834 Points

When 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
A R
12,834 Points

I have the full project in progress linked here: https://github.com/AeronRoemer/InteractiveForm

A R
A R
12,834 Points

I'm not sure where things went wrong, it's working now for me too. Thanks for your help.