How to include an Array and a Incrementing Variable into a getElementById Statement?

Question

I am trying to disable dynamically created drop down menu options (depending on the users interaction with other menus options) and I am running into an error stating that "null" is not an object.

On this Line of code:

if (document.getElementById(DropDownNames[j]+x).value = openerVals) {

I believe I have a syntax error however I am still very new to Javascript and am not entirely sure.

Here is the entire code:

var OpeningEmployees = document.getElementById('opener');
var QuantityDDOptions = ('#opener option').length;

var openerVals = eodForm.elements["opener"].value;

var DropDownNames = new Array();
DropDownNames[0] = "ui-multiselect-opener-option-";
DropDownNames[1] = "ui-multiselect-mid-option-";
DropDownNames[2] = "ui-multiselect-closer-option-";
DropDownNames[3] = "ui-multiselect-SR-option-";
DropDownNames[4] = "ui-multiselect-CR-option-";
DropDownNames[5] = "ui-multiselect-A-option-";
DropDownNames[6] = "ui-multiselect-BD-option-";
DropDownNames[7] = "ui-multiselect-Fridge-option-";
DropDownNames[8] = "ui-multiselect-AO-option-";
DropDownNames[9] = "ui-multiselect-EPV-option-";



OpeningEmployees.onchange = function () {
    for (var j = 0; j <= DropDownNames.length; j++){
        for (var x = 0; x <= QuantityDDOptions; x++) {
        if (document.getElementById(DropDownNames[j]+x).value = openerVals) {
            document.getElementById("'"+DropDownNames[j]+x+"'").setAttribute("disabled","disabled");

Thank you all for your help. I have made the changes from your posts and am still getting the error in the browser console. Note that the numbers at the ends of the drop down names are dynamic. As users get added to the database they get added to the drop down menu thats why I set QuantityDDOptions equal to the amount of options. The options start at 0.

Here is the Updated Code:

var OpeningEmployees = document.getElementById('opener');
var QuantityDDOptions = ('#opener option').length;

var openerVals = eodForm.elements["opener"].value;

var DropDownNames = new Array();
DropDownNames[0] = "ui-multiselect-opener-option-";
DropDownNames[1] = "ui-multiselect-mid-option-";
DropDownNames[2] = "ui-multiselect-closer-option-";
DropDownNames[3] = "ui-multiselect-SR-option-";
DropDownNames[4] = "ui-multiselect-CR-option-";
DropDownNames[5] = "ui-multiselect-A-option-";
DropDownNames[6] = "ui-multiselect-BD-option-";
DropDownNames[7] = "ui-multiselect-Fridge-option-";
DropDownNames[8] = "ui-multiselect-AO-option-";
DropDownNames[9] = "ui-multiselect-EPV-option-";



OpeningEmployees.onchange = function () {
    for (var j = 0; j < DropDownNames.length; j++){
        for (var x = 0; x < QuantityDDOptions; x++) {
            if (document.getElementById(DropDownNames[j]+x).value == openerVals) {
                document.getElementById(DropDownNames[j]+x).setAttribute("disabled","disabled");

Answer 1

document.getElementById(DropDownNames[j]+x).value = openerVals

needs to be

document.getElementById(DropDownNames[j]+x).value == openerVals

A single = will set something equal to another thing (and returns the set value). Since you use this, that means that the result that's used by the if statement is the truthyness of the set value.

== is used to evaluate if two things are equal to each other, with type coercion. (2 == "2" is true)

=== is used to evaluate if two things are equal to each other, without type coercion. (2 !== "2" is true)

Answer 2

That if statement should be using == instead of =. And in the next line, you don't need to put the quotes around the id. It's already a string.

The reason for getting the error is that you should have

for (var j = 0; j < DropDownNames.length; j++){

If you use <=, you'll be trying to access an array element that isn't there (DropDownNames[10]), so document.getElementById won't return anything. This is most likely also the case for x.

Answer 3

Your if statement is using assignment (=) instead of comparison (==)

Some people would even say to use === for comparison in javascript