Hi all -

My objective seems so simple, yet I can't seem to get the dropdown list to populate using javascript.

Here's my code:

function onInitialUpdate() {
popbalyear();
}
 
function popbalyear() {
// This function will populate the Balance Year control with current year - 10 years.
    var balyear = document.getElementById('combobox1');
    var yearnow = new Date().getFullYear();
    var i;
    for (i = 0; i < 10; i++) {
        var opt = yearnow - i;
        var element = document.createElement("option");
        element.textContent = opt;
        element.value = opt;
        balyear.options.add(element); 
        alert(balyear.options(i).value);     
    }
}

and in the body...

<LABEL style="Z-INDEX: 14; POSITION: absolute; WIDTH: 110px; HEIGHT: 42px; TOP: 10px; CURSOR: default; FONT-WEIGHT: bold; LEFT: 30px" id=label8 tabIndex=-1 for=combobox1 name="combobox1">Balance Year</LABEL> 
<SELECT style="Z-INDEX: 15; POSITION: absolute; OVERFLOW-Y: visible; WIDTH: 78px; OVERFLOW: visible; TOP: 10px; LEFT: 150px" id=combobox1 tabIndex=10 size=1 persistentuniqueid="compUid_6" defaultselection="1" defaultlocation="0,0,22,58" boundtovariable="1" requiredfield="1" name="combobox1"></SELECT>

This produces a blank dropdown list.

What am I missing?

This message has been edited. Last edited by: <Kathryn Henning>,

When setting an option use 'text' not 'textContent', which is used for elements:

function onInitialUpdate() {
popbalyear();
}
 
function popbalyear() {
// This function will populate the Balance Year control with current year - 10 years.
    var balyear = document.getElementById('combobox1');
    var yearnow = new Date().getFullYear();
    var i;
    for (i = 0; i < 10; i++) {
        var opt = yearnow - i;
        var element = document.createElement("option");
        element.text = opt;
        element.value = opt;
        balyear.options.add(element); 
        alert(balyear.options(i).value);     
    }
}

Actually, since the option value and display value are identical in your case, you don't even need to set the value attribute.

Personally I prefer to create explicit text nodes for options, in which case it turns out as:

function onInitialUpdate() {
popbalyear();
}
 
function popbalyear() {
// This function will populate the Balance Year control with current year - 10 years.
    var balyear = document.getElementById('combobox1'); // Note 1
    var yearnow = new Date().getFullYear();
    var i;
    var option, valueText; // Note 2

    for (i = 0; i < 10; i++) {
        option = document.createElement("option");
        valueText = document.createTextNode(yearnow - i);

        option.appendChild(valueText);
        balyear.appendChild(option);

        console.log(balyear.options(i).value); // Note 3
    }
}

Note 1: I always make sure form elements in Composer have meaningful names and ID's, so that they're easier to reference. Coding for a dropdown list named 'combobox1' is a bad habit IMHO - if you look back at that in a few months, how will you know to what form element that code relates?

Note 2: This depends a bit on the javascript engine in use (and I'm not even certain this applies to Javascript), but I learned in Java to not declare loop-local variables inside the loop. With large loops, there is a noticeable performance difference.
With your loop of 10 items, you won't notice the difference.

FYI, The reason for that is that the java(-script) engine needs to clear out loop-local variables at the end of the loop and then re-creates them straight away at the start of the next one - it does work that it doesn't need to do when re-using a function-local variable (for which it can just overwrite the value).
The fact that Java uses a garbage collector (GC) to clean out memory that's no longer in use aggravates this problem, as the GC can't keep up with the memory allocated inside the loop and you end up with several copies of allocated memory for your loop-local variables.
Now this is about Java, but it seems reasonable that this could apply to Javascript as well. I tend to stay on the safe side and use function-local variables for loop-local data regardless, but in this case that's not really necessary.

Note 3: Alert is a PITA for generated content. Most browsers have a console that you can log to.Even IE (8 and up IIRC) has one, but it's only available when having the "Developer Tools" box open. If you need to, you can work around that limitation, for example: http://stackoverflow.com/quest...or-internet-explorer