javascript error [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed last year.

Improve this question

My Script is working if

<script type="text/javascript">
$(document).ready(function() { 
 $('#holidayDate').datepicker(); 
 var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
 $("#tags").autocomplete({source:availableTags}); 
 $('#holidayDate').change(function() { 
 if ($(this).val().substring(0, 5) === '12/25') { 
 $('#tags').val('Christmas Day'); 
 }
 else { 
 $('#tags').val(''); 
 } 
 }); 
}); 
</script>

And its not working if I include multiple values using "if" or "else if"

<script type="text/javascript">
$(document).ready(function() { 
 $('#holidayDate').datepicker(); 
 var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
 $("#tags").autocomplete({source:availableTags}); 
 $('#holidayDate').change(function() { 
 if ($(this).val().substring(0, 5) === '12/25') { 
 $('#tags').val('Christmas Day'); 
 }
 if ($(this).val().substring(0, 5) === '01/01') { 
 $('#tags').val('New years Day'); 
 } 
 if ($(this).val().substring(0, 5) === '02/02') { 
 $('#tags').val('Groundhog Day'); 
 } 
 if ($(this).val().substring(0, 5) === '02/14') { 
 $('#tags').val('Valentine's Day'); 
 } 
 if ($(this).val().substring(0, 5) === '04/22') { 
 $('#tags').val('Earth Day'); 
 } 
 if ($(this).val().substring(0, 5) === '10/12') { 
 $('#tags').val('Columbus Day'); 
 } 
 if ($(this).val().substring(0, 5) === '07/04') { 
 $('#tags').val('Independence Day'); 
 } 
 if ($(this).val().substring(0, 5) === '10/31') { 
 $('#tags').val('Halloween'); 
 } 
 if ($(this).val().substring(0, 5) === '11/11') { 
 $('#tags').val('Veterans Day'); 
 } 
 if ($(this).val().substring(0, 5) === '12/07') { 
 $('#tags').val('Pearl Harbor Remembrance Day'); 
 } 
 else { 
 $('#tags').val(''); 
 } 
 }); 
}); 
</script>

• El Guapo: You may want to reformat this a bit so that it's a little easier for people to follow
• mplungjan: Seems [code] does not work - instead highlight the code and click the 101010 button
• Jakub: Have you tried using FIREBUG? ;) It is a lifesaver!
• Jakub: ... and use a switch statement get rid of those IF/ELSE statements.
• Andy E: @Jakub: I'd prefer to use an object map in a situation like this.

Answer 1

Others beat me to the answer here, but I would still like to make a small suggestion. When working with a lot of if and else if it's sometimes useful to swap it for an object map. Currently, in your code you're performing a lot of unnecessary lookups that should at least be stored into a variable instead, but using an object map could make this code a lot simpler:

var map = {
 "12/25": "Christmas Day",
 "01/01": "New Years Day",
 "02/02": "Groundhog Day",
 "02/14": "Valentine's Day",
 "04/22": "Earth Day",
 "10/12": "Columbus Day",
 "07/04": "Independence Day",
 "10/31": "Halloween",
 "11/11": "Veterans Day",
 "12/07": "Pearl Harbour Remembrance Day",
}
$('#holidayDate').change(function() {
 // Check our object map for the date, default to "" if there isn't one.
 $('#tags').val(map[$(this).val().substring(0, 5)] || ""); 
}); 

Much neater, IMO.

EDIT: Since you can't get it working, I created an example for you.

• Some Java Guy: Its not working [CODE]<script type="text/javascript"> //i INCLUDED THESE TWO LINES HERE $(document).ready(function() { $('#holidayDate').datepicker(); //JQUERY DATEPICKER //YOUR CODE HERE .. }); </script>[/CODE]
• Andy E: @oneofthelions: updated my answer with a working example on jsfiddle.net.
• Andy E: @oneofthelions: i'm not sure, I don't see a getThirdMonday() function in your question. @mplungjan seems to have implemented it for you in his answer, however.

Answer 2

$('#tags').val('Valentine's Day');

You got some quote problem here...
Should be:

$('#tags').val('Valentine\'s Day'); 

Note the backslash to escape the quote...

Answer 3

This line will cause an error

$('#tags').val('Valentine's Day');

Answer 4

You may also want to put $(this).val().substring(0, 5) into a variable in order to avoid fetching the data again on every conditional.

Answer 5

Could it be that it is broken due to

('Valentine's Day'); 

your single quote in the middle is closing the string.

Answer 6

I have created an NthDay to handle last day of and have an easter implementation too

The last version - Complete example with autofill of date from holiday too

What remains is to make it a nice jQuery plugin

Here is some of the code - no more switch

var fixedHolidayMap = { // "Name of day":"MM/DD"
"New years Day" :"01/01",
"Groundhog Day" :"02/02",
"Valentine's Day" :"02/14",
"Earth Day" :"04/22",
"Flag Day" :"06/14",
"Independence Day" :"07/04",
"Halloween" :"10/31",
"Veterans Day" :"11/11",
"Pearl Harbor Remembrance Day":"12/07",
"Christmas Day" :"12/25"
}
var variableHolidayMap = { // "Name of day":"Nth,DDD,M" 
"Martin Luther King Day":"3,Mon,1", // 3rd Mon in Jan 
"Washington's Birthday" :"3,Mon,2", // 3rd Mon in Feb 
"National Arbor Day" :"-1,Fri,4", // Last Fri of Apr
"Mother's Day" :"2,Sun,5", // 2nd Sun in May
"Memorial Day" :"-1,Mon,5", // Last Mon of May 
"Father's Day" :"3,Sun,6", // 3rd Sun in Jun
"Labor Day" :"1,Mon,9", // 1st Mon in Sep
"Columbus Day" :"2,Mon,10", // 2nd Mon in Oct
"Thanksgiving Day" :"4,Thu,11" // 4th Thu in Nov
};
var availableTags = ["Easter"]; // the odd one out
var fixedHoliday = [];
for (var o in fixedHolidayMap) { // build a holiday by dateString 
 availableTags[availableTags.length] = fixedHolidayMap[o];
 fixedHoliday[fixedHolidayMap[o]]=o;
} 
for (var o in variableHolidayMap) availableTags[availableTags.length] = o;

• Some Java Guy: Why this is not working for me. Is this working with you. I checked and I have the exact script.
• mplungjan: Did you implement or comment out the "getThirdMondayInJanuary()" ??? It was meant as a pointer to a possible MLK day
• Some Java Guy: I tried to implement. But My code would not load if I have that MLK syntax...is that right way of getting the third Monday?
• mplungjan: I missed a semicolon between res = availableTags[1] and break; -- I have added the missing function, let me know if it works for you
• Some Java Guy: @mplungjan : Awesome. I was able to get thirdMondayInFebruary for Washington Day. Now I am trying for LastFridayInApril (National Arbor Day). Can you please explain me the funtion getThirdMondayInJanuary, specifically the last three lines. I would work on the rest. Thanks again

Answer 7

try this code snip

<script type="text/javascript">
$(document).ready(function() { 
 $('#holidayDate').datepicker(); 
 var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
 $("#tags").autocomplete({source:availableTags}); 
 $('#holidayDate').change(function() { 
 substr = $(this).val().substring(0, 5);
 if (substr == '12/25') { 
 $('#tags').val('Christmas Day'); 
 }
 else if (substr == '01/01') { 
 $('#tags').val('New years Day'); 
 } 
 else if (substr == '02/02') { 
 $('#tags').val('Groundhog Day'); 
 } 
 else if (substr == '02/14') { 
 $('#tags').val('Valentine's Day'); 
 } 
 else if (substr == '04/22') { 
 $('#tags').val('Earth Day'); 
 } 
 else if (substr == '10/12') { 
 $('#tags').val('Columbus Day'); 
 } 
 else if (substr == '07/04') { 
 $('#tags').val('Independence Day'); 
 } 
 else if (substr == '10/31') { 
 $('#tags').val('Halloween'); 
 } 
 else if (substr == '11/11') { 
 $('#tags').val('Veterans Day'); 
 } 
 else if (substr == '12/07') { 
 $('#tags').val('Pearl Harbor Remembrance Day'); 
 } 
 else { 
 $('#tags').val(''); 
 } 
 }); 
}); 
</script>

• Jakub: why not just tell him to use a switch statement? IF/ELSE of this magnitude makes code horrible! w3schools.com/js/js_switch.asp