jQuery code only works once - why?

JavaScript
1

I am a total jQuery noob, and this is my first serious attempt to do something with it. I have a form with 3 select boxes for day, month, and year. When the day box is changed, I want to show the day of the week in a division. The code I’ve written works the first time I execute it. But if I change the day a second time, I get an error.

Here’s my document.ready function:


$(document).ready(function() {
  // arrival day box is changed
   $('select#a_day').change(function () {
      alert('arrival day was changed to ' + $('.selday').val());
      var theyear = $('select#a_year').val();
      var themonth =  $('select#a_month').val();
      var theday =  $('select#a_day').val();
      alert(theday + '/' + themonth + '/' + theyear);
     dayofweek = weekday(theday,themonth,theyear);
      $('#dowtext').html(dayofweek);
      alert(dayofweek);
   });
});

(the alerts are just there for debugging)

and a couple of helper functions:


function calcweekday(adate) {
var dow = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
aweekday = adate.getDay();
return dow[aweekday];
}

// onblur function:
function weekday(day,month,year)  {
adate = new Date(year,month-1,day);
if (adate)  {
weekday = calcweekday(adate);
return weekday;
}
}

The error I get is on this line:


dayofweek = weekday(theday,themonth,theyear);

and the error is a type mismatch on the line in red above. So it seems like those three variables aren’t valid any more after the first time. Help! Can anyone explain this to me?

2

The variables that were declared in $(document).ready() do not exist once the function has finished executing.

3

Oh! Um … OK. So instead of using the variables I should just directly pass the values of the select boxes to my function? I did that in an earlier incarnation, but for some reason it didn’t work, while stuffing them in vars first did. But that could have been something else I was doing wrong. I told you I didn’t know what I was doing :slight_smile:

What would be a better way of doing it?

4

Do you have a test page, or can you provide enough html so that we can put together a local simulation of what you’re trying to achieve?

5

Yep, here you go:

http://www.archetype-it.com/testjq.shtml

There are actually 2 sets of dropdowns, but for the moment I’ve only attached the behaviour to the “From” day, i.e. it only fires when you change the first day box. Ultimately it should work for both sets of boxes.

Thanks!

6

Thank you.

The trouble lies in the following function:


function weekday(day,month,year)  {
    adate = new Date(year,month-1,day);
    if (adate)  {
        weekday = calcweekday(adate); // the culprit!
        return weekday;
    }
}

The line marked “the culprit!” is reassigning the weekday variable that was a function, to be a value instead.

The next time that weekday is called as a function, the script won’t be able to because weekday is not a value instead.

The solution is one of two different approaches.

Solution 1 is where you can do without the weekday variable completely and just return the result of the function


function weekday(day,month,year)  {
	adate = new Date(year,month-1,day);
	if (adate)  {
		return calcweekday(adate);
	}
}

Solution 2 is where you declare the weekday variable, so that its scope is limited to only within that function itself.


function weekday(day,month,year)  {
	adate = new Date(year,month-1,day);
	if (adate)  {
		var weekday = calcweekday(adate);
		return weekday;
	}
}

How that trouble can be avoided is to declare all variables from the top of the function.


function weekday(day,month,year)  {
	var weekday = '';
	var adate = new Date(year,month-1,day);
	if (adate)  {
		weekday = calcweekday(adate);
		return weekday;
	}
}
7

gah! (slaps forehead) Thanks for pointing that out :slight_smile: I’ll have another play with it today.

8

yep, that fixed it! Thanks – onwards and upwards :slight_smile: