title: How do I get my shuffle button to shuffle the pieces in my array?
body: <p>I am creating a tile swap puzzle and came across a problem after writing my javascript. My puzzle pieces won't shuffle at all. I want to make sure the puzzle is solved when the page is loaded so the user can shuffle it using the button. I was wondering if my initialize function has something to do with the problem since it is supposed to show the solved puzzle in the beginning. How do I tackle this?</p>
  <p>Link to the jsfiddle: <a href="https://jsfiddle.net/Relativ/5fvx8meL/13/#&amp;togetherjs=r5Em1xsJQS" rel="nofollow noreferrer">https://jsfiddle.net/Relativ/5fvx8meL/13/#&amp;togetherjs=r5Em1xsJQS</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var selPieces = [];
  var allPieces = document.getElementById("img-holder");
  
  function initialize()
  {
      orderArray = []
      for (var i = 0; i &lt; allPieces.length; i++)
      {
          orderArray.push(i+1)
      }
  
  }
  
  function shuffle()
  {
      for (var i = 0; i &lt; allSlices.length; i++) 
      {
          allPieces.addEventListener('click',selectMe)
          var rand = Math.floor(Math.random()*orderArray.length)
           allPieces[i].style.order = orderArray[rand];
           orderArray.splice(rand,1);
      }
  }
  function selectMe(){
      this.style.border = "2px solid green";
      selPieces.push(this);
      if(selPieces.length === 2){
          // get order of clicks
          let orderFirst = allPieces[i];
          let orderSecond = allPieces[i]
          //reoreder
          selPieces[0].style.order = orderSecond;
          selPiece[1].style.order = orderFirst;
  
          selPiece[0].style.border = "none";
          selPiece[1].style.border = "none";
  
          // reset 
          selPieces.length = 0;
          checkIsComplete()
      }
  }
  function checkIsComplete(){
      let currentDiv = document.getElementById('.'+currentView);
      allPieces = document.getElementById("img-holder");
      let correctOrder = [];
      for (let i = 0; i &lt; allPieces.length; i++) {
          correctOrder.push(i+1)
      }
      let currentOrder = [];
      for (let i = 0; i &lt; allPieces.length; i++) {
          const piece = allPieces[i];
          currentOrder.push
      }
      if(currentOrder.toString() == correctOrder.toString()){
          let activeLink = document.getElementById("active");
          activeLink.classList.add('finished');
          currentDiv.style.border = "5px solid green";
          currentDiv.style.boxShadow = "0 0 16px green";
          alert("Winner! ... Press Start and Play Again");
      }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      background: radial-gradient(#9D5900, #3D2200);
    }
    .game-container {
      display: grid;
      grid-template-columns: repeat(4, auto);
      grid-gap: 10px;
      margin: 50px;
      justify-content: center;
   
    }
    
    .card {
      height: 100%;
      width: 100%;
    }
  
    .img-holder {
      flex-basis: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="PicturePuzzle.css" /&gt;
      &lt;script src="PicturePuzzle.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;head&gt;
          &lt;body onload = "initialize()"&gt;
            &lt;div class="game-container"&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char1.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char2.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char3.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char4.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char5.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char6.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char7.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char8.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char9.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char10.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char11.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char12.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char13.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char14.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char15.jpg"&gt;&lt;/div&gt;
              &lt;div class="img-holder"&gt;&lt;img class="card" src="char16.jpg"&gt;&lt;/div&gt;
      
          &lt;/div&gt;  
              &lt;button style="width: 100px; height: 50px;" onclick = "shuffle()"&gt;Shuffle&lt;/button&gt; 
            &lt;/div&gt; 
            
          &lt;/body&gt;
      &lt;/head&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>