javascript - JsFiddle が定義されていないエラーを出すのはなぜですか?

Question

このフィドルhttp://jsfiddle.net/fXfSz/を見てください:

コンソールを見るshiftLeftと未定義ですが、次のように定義されています。

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

Answer 1

関数shiftLeftがグローバル スコープで定義されていないためです。これは、割り当て先の関数に対してローカルですonload(その割り当ても行う関数のみを実行するように JSFiddle を構成したため、決して実行されない関数onload)。

イベント ハンドラーを属性ではなく JavaScript にバインドしonclickます。

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();

Answer 2

関数shiftLeftはグローバル スコープではなく、onloadイベント ハンドラーの 1 つに定義されています。

関数コードからそれを削除しonload、フィドル ラッピング設定を「ラップなし - ヘッド内」に変更します。または、click関数を使用してバインドすることをお勧めします。

しかし、関数には他のバグがあります。多分あなたはこれが欲しい：

<button id="idofthebutton">Left</button>
<script>
$('#idofthebutton').click(function(){
    $('#chars').children().each(function(){
         $(this).css({left:$(this).position().left -100});
    });
});
</script>

デモンストレーション