I am trying to call a javascript function onChange of an HTML Select.

HTML Doc:

<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>
<script>
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
</script>

I get the first alert, but not the second one. What am I missing?

EDIT: The code actually works, but for whatever reason, I cannot use the separate panes in JSFiddle. Any thoughts on that?

I am trying to call a javascript function onChange of an HTML Select.

HTML Doc:

<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>
<script>
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
</script>

I get the first alert, but not the second one. What am I missing?

EDIT: The code actually works, but for whatever reason, I cannot use the separate panes in JSFiddle. Any thoughts on that?

• javascript
• html

• 2 Works just fine for me: jsfiddle/PT38t – Blender Commented Mar 14, 2013 at 19:56
• I was using JSFiddle as well, but I had them in the separate boxes. I guess that doesn't work right? – Jeff Commented Mar 14, 2013 at 19:57
• 1 I think this is jsFiddle's way of telling you not to use global functions ;-) jsFiddle hasn't placed your function test on "window" – magritte Commented Mar 14, 2013 at 20:08

4 Answers 4

When jsFiddle runs your code, it wraps it in a closure like this:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
}//]]>  
</script>

So the function you defined "test", is never available as a global function, therefore not accessible by the inline javascript which you placed on the select tag.

I strongly suggest you learn to use jQuery instead to attach your event handlers like this:

<select name="network">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>

$(function () {
    console.log("oh look, the document is ready");

    $("[name=network]").change(function () {
        console.log("now my code is groovy, but i might want to use an id rather than name selector"); 
    });
});

Your script is Ok, you just put the same value ("test") for both alert.

<script>
    alert("test1");
    var URLArray = [];
    function test(str){
        alert("test2");
    }
</script>

Or maybe the final goal is this...

function test(elm){
    alert(elm.value);
}

try to move your script above your first call like below:

<script>
    alert("test");
    var URLArray = [];
    function test(str){
        alert("test");
    }
</script>


<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>

This is the jsfiddle as you see I set the javascript to be put in the header.

As Panayot said, your code is OK, but I'd rather use console.log() instead of alert. It's much easier to view on the console than following alerts.

<select name="network" onChange="test(this)">
    <option value="net1">Net1</option>
    <option value="net2">net2</option>
</select>
<script>
    console.log("test1")
    var URLArray = [];
    function test(str){
        console.log("test2");
    }
</script>