Javascript does not execute branch IF statement

Question

Why does this condition always execute the ELSE and not the IF branch. Here's the javascript:

$(document).ready(function(){

if (document.getElementById("analyses").value == 'distance'){

loadScript('/static/distance.js', function()
{
     console.log('done loading');
    });
}else{
loadScript('/static/geoClusters.js', function()
{   
console.log('done loading');
});
 }
});

The form has several select tags with different option values as such:

<select name="analysis" id="analyses">
     <option value="" disabled="disabled" selected="selected">Select Analysis</option>
      <option value="distance">distance</option>
      <option value="clustered">clustering</option>
</select>

I can't see what's wrong with the if-else statment.

Thanks

EDIT

Thanks for all the great suggestions, I think the way the code is structured the way suggested by @trebuchet works:

$("#analyses").bind("change",function(){
.............code.......
});

Thank you everyone.

You've got a good answer on how to do this with jQuery but if you're trying to do it without you can look at this question: [How to get the selected value of dropdownlist using JavaScript?](http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript) — Cymen, Dec 05 '12 at 23:43

McGarnagle · Answer 1 · 2012-12-05T23:47:25.030

6

You actually can't use value like that on an HTML select element -- it has the property selectedIndex, but not selectedValue. JQuery does implement val() on select elements, though:

if ($("#analyses").val() == 'distance')

If you're doing it with straight Javascript, then you have to first get the selected index, then the value from the option element:

var sel = document.getElementById("analyses");
if (sel.options[sel.selectedIndex].value)

To answer your question, with the original code, Javascript will always execute the else branch, because document.getElementById("analyses").value is undefined, which Javascript typecasts as "false" in a boolean statement.

Fiddle.

edited Dec 05 '12 at 23:47

answered Dec 05 '12 at 23:42

McGarnagle

101,349
31
229
260

Thanks. I tried your example in fiddle and modified it a bit, but I get the same problem. http://jsfiddle.net/9EAsm/7/ – user94628 Dec 05 '12 at 23:58
@user94628 there are script errors in your Fiddle ... see here: http://jsfiddle.net/kMHVS/1/ – McGarnagle Dec 06 '12 at 00:00
1

Thanks for the help...the way my code was set up it wasn't working. Thank you for your help. – user94628 Dec 06 '12 at 00:12

score 2 · Accepted Answer · answered Dec 05 '12 at 23:46

The way your code is structured it will only run once on page load - in which case the value of the select will always be an empty string. If you want it to respond to changes:

$("#analyses").bind("change",function(){

    if (document.getElementById("analyses").value == 'distance'){

        loadScript('/static/distance.js', function()
        {
           console.log('done loading');
        });
    }else{
        loadScript('/static/geoClusters.js', function()
        {   
            console.log('done loading');
        });
     }
});

score 1 · Answer 3 · answered Dec 05 '12 at 23:47

at the time of document.ready fires, the value of analyses is always going to be "" because that is the default selected option. I'm not sure since the first option is disabled why this happens but apparently that's what is happening.

If you change the default selected option value to "distance" then it does fire you can see here:

<select name="analysis" id="analyses">
     <option value="" disabled="disabled">Select Analysis</option>
      <option value="distance" selected="selected">distance</option>
      <option value="clustered">clustering</option>
</select>

I posted a test here too: http://jsfiddle.net/BKD4u/

Javascript does not execute branch IF statement

3 Answers3