Simple Javascript function not working in jsfiddle

Question

I have the following HTML Code.

 <select onChange="TestCall()">
<option>Text1</option>
<option>Text2</option>
<option>Text3</option>
<option>Text4</option>
</select>

My JavaScript have a simple alert message like below.

 function TestCall()
{
 alert("Test");
}

Check the following Jsfiddle. I have added my script in the javascript area of jsfiddle. It is not working.

But If i move script block inside the HTML area of jsfiddle is working. Check the below one.

What wrong in my code? Any Idea?

jsfiddle.net/Q9ukX/2 - On the 2nd dropdown under Frameworks & Extensions, choose No wrap in <head> or <body> — Nick R
– Nick R, Commented Jun 2, 2014 at 11:21
Don't apply listeners like this. It is annoying and not maintainable. element.addEventListener('change', TestCall, false); — Jeff Shaver
– Jeff Shaver, Commented Jun 2, 2014 at 11:33

VisioN · Accepted Answer · 2014-06-02 11:22:38Z

4

By default JSFiddle wraps the JS block into onLoad function:

... leading to something like:

window.onload = function() {
    function TestCall() {
        alert("Test");
    }
};

This means that your TestCall method is getting out of global scope and is not accessible from HTML attributes.

Change the option to No wrap - in <head> or No wrap - in <body> and it will work.

DEMO: http://jsfiddle.net/Q9ukX/3/

answered Jun 2, 2014 at 11:22

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks VisioN. But why it is not working in "onDomready" selection also?

@SureshPonnukalai Same reason: the code gets wrapped in onDomReady function and is getting out of global scope.

Albzi · Accepted Answer · 2014-06-02 11:21:28Z

2

It works if you change the settings down the side.

Change it from onLoad to No Wrap - in body or No Wrap - in head.

answered Jun 2, 2014 at 11:21

Albzi

15.6k6 gold badges49 silver badges67 bronze badges