Question

I have create a function so that it would load the function whenever call that function through the button. But it works only when I refresh the page but not working when I hit the Swap button.

Here is the link http://www.onlinedemowebsite.com/design/swatch/drag-and-drop/try3.html

Can anyone help me to solve the problem.

Thanks

Answer 1

You have onclick=”shuffle()” on the swap button and that function is not defined in the global scope which the event will be fired within. Either move the function to the window scope, or create the DOM-node and attach a real event to it instead of using document.writeln

Also, the shuffle function use document.writeln, an example would be to revise it and do something like this instead:

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.
    }
}

Edited:

change your shuffle function to look like this:

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;
}

then change the part where you create the container (in 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 */