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

Posted by Siddharth Pandey
Siddharth Pandey
7,280 Points

Why is this not working?

I have these days that are marked in gray that signify "unavailable," the issue is whenever the user clicks on the date the alert pops up but the date's class still changes to "selected" which overrides the "unavailable" class. I added the .addClass and .removeClass to the day pressed but it still does not work. How can I fix my program so that when the user clicks on an unavailable date the alert pops up and the selected date is the user's previously selected date?

Here are the files

Website: https://sid-fbla.github.io/FBLA/ navigate to: Book --> Continue(the menu expands when you press this) --> Departure(you should see a date menu pop up when you click on this and the date in red is the current date)

Github file: https://github.com/sid-FBLA/FBLA/tree/master Navigate to calc.js (JS/calc.js)

This may seem like a lot but the only important lines are: 571 - 608, these lines just add the class selected to the date you press, lines 577 - 581, is where I remove the class "selected" and add the class "unavailable" and display the alert message, the alert message works but the remove class on selected does not, why is this, is some other code overriding this? Any help is greatly appreciated!

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The code that shows the alert isn't preventing the rest of the code from running and making changes. Just make the handler stop there, and also move this test up before any variables get changed:

          if (day.classList.contains('unavailable')) {
            alert('Sorry, you can only fly on available dates, any dates marked in gray are unavailable.');
//          day.classList.remove('selected');  <- not needed, hasn't changed yet
//          day.classList.add('unavailable');  <- not needed, hasn't changed yet
            return false;                      // stop the handler here
          }
Siddharth Pandey
Siddharth Pandey
7,280 Points

Thank you so much, how did this never occur to me, Steven you have been such a great help this entire time!

Siddharth Pandey
Siddharth Pandey
7,280 Points

Hey Steven, I'm having trouble on something else now, your help would be greatly appreciated :)

Here's the link to the question: https://teamtreehouse.com/community/how-do-i-select-elements-from-different-html-files-with-javascript

Thanks so much, Sid

tylerduprey
seal-mask
.a{fill-rule:evenodd;}techdegree
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 Points
tylerduprey
.a{fill-rule:evenodd;}techdegree
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 Points

Siddharth. This project looks like fun and it looks like you've worked hard on it! What's happening is on the line 572 you're adding the class "selected" even if that date isn't available. So any time you add the class "Unavailable" you'll probably also want to add this line: $(".day:contains('" + unavailableDates[i] + "')").removeClass('selected'); Adding that line of code to line 508 in calc.js will clear up the issue mentioned in this post. Add it underneath this line on 507: $(".day:contains('" + unavailableDates[i] + "')").addClass('unavailable');

This will solve your issue. You may want to consider fixing the if statement for line 572. You can check if the date is available before adding a class. Then none of this will be necessary.

I really hope that helps! Good luck with this project!

Siddharth Pandey
Siddharth Pandey
7,280 Points

Thanks! I appreciate your time and helpfulness.