mischen und sortieren mit Javascript

Question

Ich bin neu in JavaScript, versuchen, ein Zahlenraster mit Werten von 1-9 zu zeichnen. Zwei Tasten zum Mischen und Sortieren bei Klick. the grid I am looking for

Ich kann die Zahlen mischen, aber nicht zu den divs zurück zuweisen. Jede Hilfe wird sehr geschätzt.

Auch würde Hilfe bei der Weitergabe der Hex-Farbwerte (in der img) zu jedem div.

$(".btn_shuffle").click(function() { 
     var cardNumbers = []; 
     $('.card').each(function() { 
      cardNumbers.push(this.innerHTML); 
     }); 
     var theLength = cardNumbers.length-1; 
     var toSwap ; 
     var temp; 
     console.log(cardNumbers); 
     for(i=theLength; i>0; i--){ 
      toSwap = Math.floor(Math.random()*i); 
      temp = cardNumbers[i]; 
      cardNumbers[i] = cardNumbers[toSwap]; 
      cardNumbers[toSwap]=temp; 
     } 
     console.log(cardNumbers); 

    }); 

the fiddle I tried

Answer 1

$(".btn_shuffle").click(function() { 
 
     var cardNumbers = []; 
 
     $('.card').each(function() { 
 
      cardNumbers.push(this.innerHTML); 
 
     }); 
 
     var theLength = cardNumbers.length-1; 
 
     var toSwap; 
 
     var temp; 
 
     // console.log(cardNumbers); 
 
     for (var i = theLength; i > 0; i--) { 
 
      toSwap = Math.floor(Math.random() * (i + 1)); 
 
      temp = cardNumbers[i]; 
 
      cardNumbers[i] = cardNumbers[toSwap]; 
 
      cardNumbers[toSwap] = temp; 
 
     } 
 
     
 
     // console.log(cardNumbers); 
 
\t \t \t \t 
 
     // adding them back, i is already =0 from the above loop, so we just use it again 
 
     
 
     $('.card').each(function() { 
 
      this.innerHTML=cardNumbers[i]; 
 
      i++; 
 
     }); 
 
     // 
 
    });

#shuffle > div { 
 
    float: left; 
 
    line-height: 30px; 
 
    width: 50px; 
 
    text-align: center; 
 
    background-color: steelblue; 
 
    color: #fff; 
 
    border-radius: 4px; 
 
    margin: 3px; 
 
} 
 
#shuffle { 
 
    max-width: 360px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn_shuffle" id="shuffle">Shuffle</button> 
 
<button class="btn_sort">Sort</button> 
 
<div id="shuffle"> 
 
    <div class="card">1</div> 
 
    <div class="card">2</div> 
 
    <div class="card">3</div> 
 
    <div class="card">4</div> 
 
    <div class="card">5</div> 
 
    <div class="card">6</div> 
 
    <div class="card">7</div> 
 
    <div class="card">8</div> 
 
    <div class="card">9</div> 
 
</div>