Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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
216,017 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
          }

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

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
tylerduprey
24,474 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!

Thanks! I appreciate your time and helpfulness.