Error Unable to get property 'options' of undefined or null reference

3.3k views Asked by At
  function Validate() {
        for (var i = 0; i < 2; i++) {
            var objCat = document.getElementById("ddlCategories" + i);
                if (objCat.options[objCat.selectedIndex].text != "--SET--") {
                    for (var j = i + 1; j < 6; j++) {
                        var objCatNext = document.getElementById("ddlCategories" + j);
                        if (objCat.options[objCat.selectedIndex].text == objCatNext.options[objCatNext.selectedIndex].text) {
                            spnMessage.innerHTML = objCatNext.options[objCatNext.selectedIndex].text + " exists.";
                            return false;
                       }
                    }
                }             
        }
        return true;
    }

I have the above Javascript code that is working fine in Chrome but throws the following exception in IE 11.

Error: Unable to get property 'options' of undefined or null reference

I have tried to first check if objCat is not null or undefined but the exception is still being thrown, again only in IE.

function Validate() {
        for (var i = 0; i < 2; i++) {
            var objCat = document.getElementById("ddlCategories" + i);
            if (objCat) { //check if objCat is not null or undefined but this has solved the issue.
                if (objCat.options[objCat.selectedIndex].text != "--SET--") {
                    for (var j = i + 1; j < 6; j++) {
                        var objCatNext = document.getElementById("ddlCategories" + j);
                        if (objCat.options[objCat.selectedIndex].text == objCatNext.options[objCatNext.selectedIndex].text) {
                            spnMessage.innerHTML = objCatNext.options[objCatNext.selectedIndex].text + " exists.";
                            return false;
                       }
                    }
              }  }             
        }
        return true;
    }

Is any body noticing a possible cause?

Below is the html generated when you view the page's source in the browser

<select name="ddlCategories0" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ddlCategories0\&#39;,\&#39;\&#39;)&#39;, 0)" id="ddlCategories0" class="input Width250" onclick="Clear()">
<option value="0"> --SELECT--</option>
<option selected="selected" value="2">One</option>
<option value="3">Two</option>
</select>

 <select name="ddlCategories1" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ddlCategories1\&#39;,\&#39;\&#39;)&#39;, 0)" id="ddlCategories1" class="input Width250" onclick="Clear()">
<option value="0"> --SELECT--</option>
<option value="2">One</option>
<option selected="selected" value="3">Two</option>
</select>
1

There are 1 answers

1
Lokesh Yadav On

While debugging the provided code snippet, it seems like an issue with inner FOR Loop where initial value of j is coming as "2" on the first run, which in turn build "ddlCategories2" and objCatNext becomes "undefined".

Not sure why you are adding +1 with declaration of "j" i.e. var j = i + 1; But if you put j = i then it resolves the first error.

function Validate() {
    var spnMessage = document.getElementById('message');
    for (var i = 0; i < 2; i++) {
        var objCat = document.getElementById("ddlCategories" + i);
        if (objCat) { //check if objCat is not null or undefined but this has solved the issue.
            if (objCat.options[objCat.selectedIndex].text != "--SET--") {
                for (var j = i; j < 6; j++) {
                    var objCatNext = document.getElementById("ddlCategories" + j);
                    if (objCat.options[objCat.selectedIndex].text == objCatNext.options[objCatNext.selectedIndex].text) {
                        spnMessage.innerHTML = objCatNext.options[objCatNext.selectedIndex].text + " exists.";
                        return false;
                   }
                }
          }  }             
    }
    return true;
}

Next, declare "spnMessage" in JS (it is coming undefined as of now).

Working Fiddle - http://jsfiddle.net/ylokesh/

Hope it helps.

One small suggestion - It would be really helpful & quick to debug if you create a working example of this code either on JSFiddle http://jsfiddle.net or codepen http://codepen.io