javascript - Why is JsFiddle giving not defined error?

Question

Take a look at this fiddle http://jsfiddle.net/fXfSz/:

If you look in the console it shiftLeft is undefined but it is defined like so:

function shiftLeft()
{
    for (var char in $('#chars').children())
    {
        log(char);
        char.css({left:char.position().left -100});
    }
}

Answer 1

Because the function shiftLeft is not defined in the global scope. It is local to the function that you assign to onload (a function that never runs because you have configured JSFiddle to only run the function that does that assignment onload too).

Bind your event handlers with JavaScript, not with onclick attributes.

function shiftLeft()
{
    for (var char in $('#chars').children())
    {
        // log is not a global
        console.log(char);
        char.css({left:char.position().left -100});
    }
}

function assignHandlers() {
    document.querySelector('button').addEventListener('click', shiftLeft);
}


// If you weren't using JSBin to run this onload:
// addEventListener('load', assignHandlers);
// but since you are:
assignHandlers();