0

I have a dynamically generated text area and button via javascript. I have it working so that when a value is entered into the text area, and then the button is clicked, a random amount of SPAN tags will be created. For each character of the value from the text area, a span tag with the attribute hidden is created.

Here's a working fiddle: https://jsfiddle.net/9feso12c/

Using JavaScript, I append these spans to a document fragment. If I append the document fragment to a container, all spans in order appended to the DOM. What I want is to "scramble" the document fragment, THEN append it to the DOM.

What I have now when HELLO is typed into the text area and button is clicked:

    <div id="mainContainer">
        <span hidden>H</span>
        <span hidden>E</span>
        <span hidden>L</span>
        <span hidden>L</span>
        <span hidden>O</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
    </div>

What I WANT:

    <div id="mainContainer">
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>H</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>E</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>L</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>L</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span hidden>O</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
        <span>Q</span>
    </div>
DaneTheory
  • 282
  • 3
  • 16

1 Answers1

0

This would be pretty easy with underscore.js. Of course you can write the function yourself too:

var containerEl = document.querySelector('#mainContainer');
var shuffleArr = _.shuffle(containerEl.children);

// Empty container
containerEl.innerHTML = "";

// Re-add shuffled children
for (var i = 0; i < shuffleArr.length; i++) {
    containerEl.appendChild(shuffleArr[i])
}

jsfiddle

Edit: To get this done without underscore:

document.children contains a NodeList and not an array so we're not able to shuffle using Array.sort by default. If you see below I've moved the elements into an array and then used Array.sort.

var containerEl = document.querySelector('#mainContainer');
var childrenArr = [];

for (var i = 0; i < containerEl.children.length; i++) {
  childrenArr.push(containerEl.children[i]);
}

// Shuffle array
childrenArr.sort(function() {
  return Math.random() - 0.5;
});

// Re-add shuffled children
for (var i = 0; i < childrenArr.length; i++) {
    containerEl.appendChild(childrenArr[i])
}

jsfiddle

Jamy
  • 901
  • 8
  • 12
  • Thanks for taking the time out to help. I'm writing this in pure vanilla JS, so no external libraries. The trick, I believe, is in shuffling the document fragment and then appending that to the container div. – DaneTheory Dec 03 '15 at 06:59
  • I've updated the fiddle to shuffle without a library: http://jsfiddle.net/nboLc7hg/2/ – Jamy Dec 03 '15 at 08:03
  • This is great. I'm working on this as well, and converting to an array was the way I decided to go as well. One issue is that this method requires the DOM to already be created with span tags. In my JS fiddle, I'm creating the SPAN's based on the value taken from the text area field, then attempting to do the scrambling. – DaneTheory Dec 03 '15 at 08:55
  • I've edited your initial jsfiddle. I've also removed the "hidden" attribute for testing purposes. https://jsfiddle.net/9feso12c/1/ – Jamy Dec 03 '15 at 09:17