function - 内部関数を呼び出す方法はありますか

Question

ボタンを介してその関数を呼び出すたびに関数をロードするように、関数を作成しました。しかし、ページを更新したときにのみ機能し、スワップボタンを押しても機能しません。

ここにリンクがあります http://www.onlinedemowebsite.com/design/swatch/drag-and-drop/try3.html

誰でも問題を解決するのを手伝ってもらえますか。

ありがとう

Answer 1

スワップ ボタンに onclick="shuffle()" があり、その関数は、イベントが発生するグローバル スコープで定義されていません。関数をウィンドウ スコープに移動するか、DOM ノードを作成して、document.writeln を使用する代わりに実際のイベントをそれにアタッチします。

また、シャッフル関数は document.writeln を使用します。たとえば、それを修正して、代わりに次のようにします。

function shuffle(){
    //organize and sort your letters here
    var letters = ....
    //query for all elements with class = 'letters' use a library if you want full browser support.
    var letter_nodes = document.querySelectorAll("div.letters"); 

    for ( var i = 0, n = letter_nodes.length; i<n; ++i ) {
        letter_nodes[i].innerHTML = letters[i]; // letters and letter_nodes array should have the same length.
    }
}

編集:

シャッフル関数を次のように変更します。

var letters=['A','B','E','F','O','M','I','T']; //to access letters.length in the other function
function shuffle(){
    letters.sort(function(){return 0.5 - Math.random();});

    var letter_nodes = document.getElementById('lettersContainer');
    letter_nodes = letter_nodes.getElementsByTagName('div');        

    for ( var i = 0, n = letter_nodes.length; i<n; ++i ) {
        letter_nodes[i].innerHTML = letters[i];
    }

    return false;
}

次に、コンテナを作成する部分を変更します（print_2d_string_array内）

    document.writeln ("<a href='#' onclick='return shuffle()' class='swap'>Swap</a>");
    document.writeln ("<div id='lettersContainer'>");

    for ( var i = 0; i < letters.length; ++i ) {
    document.writeln ("<div class='letters'></div>");
    }

    shuffle();
    document.writeln ("</div>"); /* lettersContainer end */