脚本错误：“ c不是函数”

Question

I get the following javascript error when I debug in firebug:

'cities' is not a function. 

What I'm trying to achieve is dynamic options and it used to work, this is just a new version of the page which has broken the old function that I need to restore. It's called from HTML:

<select name="w" onchange="cities(this);" id="searcharea_expanded" class="">

And it is declared as javascript in the same file:

<script>
function cities(obj){

    if(obj.value == '3'){

         //undisplay cities options municipality_control2

        document.getElementById('municipality_control').style.display='none'

    }else{

        $('#cities').load('/cities?regionId='+obj.value);
    }
}  
}
</script>

So why am I getting this error? I also have a div named cities which is the div that the script shall update and this used to work:

<div id="cities" class="selectbox munics ">
     <select id="municipality_control" name="m">
         <option value="4691207">Madgaon</option>
         <option value="4695203">Mormugao</option>
         <option value="4692204">Panaji</option>
         <option value="4676203">Other city</option>
    </select>
</div>

Answer 1

The problem is that you are closing more braces than you've opened. If you use jQuery, use its functions. For example instead of document.getElementById("id") use $("#id") .

Your code will be:

<script>
    function cities(obj){
       if(obj.val() == '3'){
         // undisplay cities options municipality_control2
         // document.getElementById('municipality_control').style.display='none'
         $('#municipality_control').hide()
       } else {
         $('#cities').load('/cities?regionId='+obj.val());
       }
    }  
    // } << This has to be removed
</script>

I also recommend you to prevent using HTML attributes for Javascript like onchange="..." . Use the following, instead:

$("#searcharea_expanded").on("change", function () {
     cities($(this));
});

Answer 2

Well, assuming that's a direct copy+paste from your site, then the problem is easy: you have an extra closing brace } at the end of the script. This is a syntax error that will make the entire script block invalid, which means that the function will never be defined.

if you indent your code properly, you'd notice this kind of thing more easily. In addition, I recommend using a decent editor or IDE to write your code, which does syntax highlighting. For example, opening your code in Netbeans immediately puts an error marker on the relevant line, making it extremely easy to see the problem.

Answer 3

There are at least three possibilities that I can see:

• Your cities() function gets called (maybe because you change the select ) before the script that defines it is interpreted. Verify that the <script> opens and closes before the HTML. Possibly, add the onchange listener via jQuery instead of inlining it.

• There's an error in the Javascript preventing the cities declaration from being executed at all. Inspect the error console or Javascript console or whatever your browser supplies to intercept Javascript errors.

• Your cities objects gets overwritten somehow by another cities (possibly holding the jQuery handle to the cities div ?).

I ordered the possibilities in decreasing order of likelihood based on my own mistakes.