Cannot set property error in javascript

Question

so i have this code that checks for dates and updates lists accordingly, now what i am trying to achieve is that when the for both the month and the year are set to null "mm" "yyyy" is set the day select list with one element "dd" with a value of null. but i have been having an error cannot set property 'value' of undefined. The first element in both the year and month s is set to a value of null.

this is the javascript function a guy here helped me come up with:

function monthDays (type) {

    if(document.getElementById('monthof' + type).value == null || document.getElementById('yearof' + type).value == null)
    {
        var mod = document.getElementById('dayof' + type);
        mod.length = 1;
        mod[0].value = null;
        mod[0].text = "DD";

    }
    else{
        var month = parseInt(document.getElementById('monthof' + type).value, 10),
            days = new Date(document.getElementById('yearof' + type).value, month + 1, 0).getDate(),
            i;
        var mod = document.getElementById('dayof' + type);

        mod.length = days + 1;
        mod[0].value = null;//this is where i am getting the error
        mod[0].text = "DD";
        for(i = 1; i < days+1; i++) {
            mod[i].value = i;
            mod[i].text = i;
        }
    }
}

html Birth: MM

<select id="dayofbirth" class="date" name="dayhofbirth">
         <option value=null>DD</option>
</select>
<select id="monthofbirth" class="year" name="monthofbirth" onchange="monthDays('birth')">
    <option value=null>MM</option>
</select>
<select id="yearofbirth" class="year" name="monthofbirth" onchange="monthDays('birth')">
    <option value=null>YYYY</option>
</select>
</div>

the type is there to tell the function which it should edit, since in my html I have 2 date of births.

You dont have anything with id monthofbirth

PSL
– PSL

2013-11-27 20:13:47 +00:00
Commented Nov 27, 2013 at 20:13 — PSL
– PSL, Commented Nov 27, 2013 at 20:13
that a typo it is there in the actual code

mikkuslice
– mikkuslice

2013-11-27 20:25:07 +00:00
Commented Nov 27, 2013 at 20:25 — mikkuslice
– mikkuslice, Commented Nov 27, 2013 at 20:25

Brian Poole · Accepted Answer · 2013-11-27 20:44:32Z

1

The object returned by getElementById( ) returns a reference to an element, not an array of options when you're selecting a select element. You can access the options through a property on the object but you don't need to do that to set the selected option. To set the selected option, just set the value like you are but remove the [0] part. You also need to set null as a string ('null') because it is a string value in the HTML.

Here's what I came up with for you:

HTML

<select id="dayofbirth" class="date" name="dayhofbirth">
    <option value=null>DD</option>
    <option value=01>01</option>
</select>
<select id="monthofbirth" class="year" name="monthofbirth" onchange="monthDays('birth')">
    <option value=null>MM</option>
    <option value=12>12</option>
</select>
<select id="yearofbirth" class="year" name="monthofbirth" onchange="monthDays('birth')">
    <option value=null>YYYY</option>
    <option value=1900>1900</option>
</select>

Javascript

function monthDays(type) {
    if(document.getElementById('monthof' + type).value == null || document.getElementById('yearof' + type).value == null)
    {
        var mod = document.getElementById('dayof' + type);
        mod.length = 1;
        mod.value = 'null';
    }
    else{
        var month = parseInt(document.getElementById('monthof' + type).value, 10),
            days = new Date(document.getElementById('yearof' + type).value, month + 1, 0).getDate(),
            i;
        var mod = document.getElementById('dayof' + type);

        mod.value = 'null';
        for(i = 1; i < days+1; i++) {
            mod.add(i);
        }
    }
}

See it in action here: http://jsfiddle.net/CT54h/

It probably doesn't do everything you want it to, but within the scope of the question it does.

answered Nov 27, 2013 at 20:44

Brian Poole

7113 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mikkuslice Over a year ago

I not fully get the scope of the .add since it does not set values, although I do appreciate your effort in order to help me out :)

Brian Poole Over a year ago

When you call the .add( ) method it doesn't specify a value as you noted, but by default the value is the contents of the option tag which is technically what you're doing in your example. To learn more about the .add( ) method, go here: w3schools.com/jsref/met_select_add.asp

mikkuslice · Accepted Answer · 2013-11-28 17:20:05Z

0

I found out what I had to do, I set the values at the beginning of each to 'null' not null, and than when I checked for their value I also checked for 'null'. I think there might be some concept that I do not fully understand when it comes to but my method seemed to have solved my problem.

answered Nov 28, 2013 at 17:20

mikkuslice

4071 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Cannot set property error in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related