Javascript - Codepen trying to change order of my html content using an array my function is working but not so well i don't understand why

Question

https://codepen.io/thibault-cabanes/pen/xmvYqr

Hi! if someone can help me, I don't know if it's the logic of my code that is wrong or if I made some mistakes , so please just take a look on it!

I create an Array named "dominos" with 13 entries;

I link each entries of dominos with each div class= domino of my html with my "lien" function;

I shuffle the dominos array with the "shuffle" function;

I send back the new order of my div in the document;

`

const reload = (array) => {

  let len = array.length-1 ;
  for (var i = 0; i <= len; i++) {
    let n = i+1,

    //
     par = document.getElementById('pioche'),
     son = array[i],
     old = document.getElementById("d"+n);
         par.replaceChild(son, old);

    //another way to do the same thing
    /*document.getElementById("pioche").replaceChild(array[i], 
    document.getElementById('d'+ n));*/ 
  }} 

lien(dominos);
shuffle(dominos);
reload(dominos)
console.log(dominos); `

In this last opération, i'm loosin some html dominos, while at the end of the opérations my array is full and shuffle, some of my html's domino's are missing, and as you refresh, there is not the same number of domino's that are missing in the DOM...

Answer 1

First off all your shuffle function makes some random array but not shuffled array of origin elements. Here is how you can fix it:

const shuffle = (array) => {
  let len = array.length - 1;
  let dominos = array.slice(0); //make a copy of your original array
   for  ( var i = len; i >= 0 ; i--){
        //select random index from 0 to array length
        var j = Math.floor(Math.random() * (dominos.length - 1));

        /*delete element at selected index from copy of the original array, 
        so it can't be randomly chosen again*/ 
        temp = dominos.splice(j, 1);

        //replace the element in the origin array with the randomly selected one
        array[i] = temp[0]; 
   }
}

The second problem is using getElementById for selecting elements in your reload function. When you make replacement, there is some possibility that you'll add element that has the the same id that is already in DOM tree. After that your ids are not unique anymore, and according to documentation: the id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document) . Since ids are not unique, the behaviour of getElementById is unpredictable. But you can always address children with childNodes from the parent element, that's how you can fix it:

const reload = (array) => {

  let len = array.length-1 ;
  for (var i = 0; i <= len; i++) {
    let n = i+1,

     par = document.getElementById('pioche'),
     son = array[i],
     //old = document.getElementById("d"+n); this line makes it all wrong
     old = par.childNodes[i]; //this way you are always addressing the correct child
     par.replaceChild(son, old);

  }} 

lien(dominos);
shuffle(dominos);
reload(dominos)
console.log(dominos);

now it should all work fine.