1

I've got my fiddle here, but I can't understand why it's not calling my function on the 'onmouseout' event. http://jsfiddle.net/foreyez/Xf6LW/

any ideas?

Shai UI
  • 50,568
  • 73
  • 204
  • 309
  • Set your framework to: "nowrap (head)", and the script from the javascript pane will be appended to an empty script tag in the head. – Shmiddty Sep 13 '12 at 20:26

5 Answers5

3

Works fine, you just needed to put the function in the head (or body after the element is in the DOM) of the document.

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Changed the first drop down menu to `no wrap (head)`. You could also select `no wrap (body)`. – j08691 Sep 13 '12 at 20:09
3

It's because the functions you create in the JavaScript panel are not global when you have the onLoad option selected. Your JavaScript gets wrapped in a function.

If you do want them to be global you have to either do what j08961 suggested, by changing that dropdown to say no wrap (body or head) will work

The best solution would be to not set your event handlers from HTML, that's bad practice anyway, then you're not relying on global functions or mixing HTML and JS.

<div id="myDiv">
</div>​
document.getElementById('myDiv').onmousemove = function() {
  alert('here');
}

Side note: you should have noticed the error in the console saying that myFunc is undefined or something like it.

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
0

I think it's cause for jsfiddle, it declares all the javascript AFTER the HTML. The HTML is going to run and look for a myFunc and not find it. Then it's going to load the JS and it won't even run it.

aug
  • 11,138
  • 9
  • 72
  • 93
  • 1
    Not really, decalring the function after the HTML is not a problem. The problem is that jsfiddle wraps it with an anonymous function by default. Read mine and j08691's answers for a clear explanation – Ruan Mendes Sep 13 '12 at 20:15
0

make myFunc as a global function;

I searched my code using firebug and got following generated code. 

window.addEvent('load', function() {
    //window.myFunc makes myFunc as a global function
    // It can be accessed from any were inside current window.
   window.myFunc = function myFunc(x)
   {
        alert('yo');
   }
    // function below is not available gloably.
    function myFunct1(){
        alert('yo1');
    }
});

see jsfiddle

Anoop
  • 23,044
  • 10
  • 62
  • 76
  • Works, but doesn't explain what the problem was. – Ruan Mendes Sep 13 '12 at 20:16
  • if you search for window.myFunct, you will get following generated code window.addEvent('load', function() { window.myFunc = function myFunc(x) { alert('yo'); } });//]]> which clearly reflect that scope of code you wrote is not global – Anoop Sep 13 '12 at 20:21
  • you can get more information regarding JavaScript function scope from link http://stackoverflow.com/questions/500431/javascript-variable-scope – Anoop Sep 13 '12 at 20:27
  • Your explanation should be in your answer, I already understand function scope. What you don't understand is that you can change the behavior from the drop down. – Ruan Mendes Sep 13 '12 at 20:33
  • If you're bored, go for a walk and don't be so annoying. – Damian SIlvera Sep 13 '12 at 20:48
  • @DamianSIlvera annoying is fine, I prefer that than being careless – Ruan Mendes Sep 14 '12 at 06:34
0

Here you can see the changes : jsfiddle.

Damian SIlvera
  • 866
  • 1
  • 9
  • 19
  • Cheap way of making it work without understanding what the problem was – Ruan Mendes Sep 13 '12 at 20:16
  • the thing here was to make it works, it doesn't matter how. Works or not? :P – Damian SIlvera Sep 13 '12 at 20:18
  • That's a naive way of coding and problem solving. Your solutions will always be brittle if you keep thinking that way. "Works or not?" makes you sound like you don't care about making it work properly. – Ruan Mendes Sep 13 '12 at 20:34