Dynamically creating multiple divs with random text elements from an array [SOLVED]

JavaScript
1

I would like to fill my 6 divs

<div class="tile" id="tile0"></div>
<div class="tile" id="tile1"></div>

etc…

with numbers from an array = [1,2,3,1,2,3]
I want the numbers from the array to be added randomly.

I wrote a do/while loop hoping to iterate it as long as all elements will have inner html but it only fills one div and all others stay empty. Is there anything wrong with my while loop or I need a different approach?

let numberOfTiles = 6;
let randomNum = Math.floor(Math.random() * numberOfTiles); 

 let j = 0;
 do {
    document.getElementById(`tile${Math.round(randomNum/2)}`).innerHTML = array[j];
    j++
  
  }
  while (document.getElementsByClassName(`tile`).innerHTML);
2

It’s only setting the random number once.

4

Thank you, but I wanted to do it the other way around. First numberOfTiles, so user can determine it and then array based on the number the user puts. It will be a memory game. The variable signsDouble will be the final array, with pairs of numbers (in this case 1-3)that will need to be shuffled.

let numberOfTiles =6
let signs=[];
function createArr() {
  for(i=1; i<=(numberOfTiles/2); i++){
    signs.push(i);
  }
  return signs
}
createArr();

let signsDouble = signs.concat(signs);
6

I am still pretty lost. Here I create my divs and right after I try to fill them with while loop, but something is still wrong

for (let i=0; i<numberOfTiles; i++){
    let div = document.createElement('div');
    div.setAttribute('class', 'tile');
    div.setAttribute('id', `tile${i}`)
    container.appendChild(div);
    
    let j =0;
     do {
      let randomArrayNum = signsDouble.splice(randomNum, 1);
       document.getElementById(`tile${j}`).innerHTML = signsDouble[randomArrayNum]; 
       j++;
    }
     while (j<numberOfTiles);
8

Of course.

Here is a link to the codepen.

10

I played around with your Codepen and I believe I simplified the code and organized it a little more. I created two versions. The first version uses the createElement method for each tile div and the second version creates the html as a string and then sets the container element’s inner html to that string

Version #1

function createStructure(numTiles) {
  //function that creates array of signs to be displayed on the tiles.
  function createSignsArr(numTiles) {
    const signs = [];
    for (let i = 1; i <= numTiles / 2; i++) {
      signs.push(i, i);
    }
    return signs;
  }

  const signsDouble = createSignsArr(numTiles);

  const container = document.createElement("div");
  container.setAttribute("class", "container");
  document.body.appendChild(container);
  for (let i = 0; i < numTiles; i++) {
    let div = document.createElement("div");
    div.setAttribute("class", "tile");
    div.setAttribute("id", `tile${i}`);
    let randomNum = Math.floor(Math.random() * signsDouble.length);
    let tile = signsDouble.splice(randomNum, 1)[0]; // [0] references 1st elem since splice creates one elem array
    div.innerHTML = tile;
    container.appendChild(div);
  } //end of for loop
} //end of createStructure function

window.onload = createStructure(12); // specify the number of tiles here

Version #2

function createStructure(numTiles) {
  //function that creates array of signs to be displayed on the tiles.
  function createSignsArr(numTiles) {
    const signs = [];
    for (let i = 1; i <= numTiles / 2; i++) {
      signs.push(i, i);
    }
    return signs;
  }

  const signsDouble = createSignsArr(numTiles);

  let container = document.createElement("div");
  container.setAttribute("class", "container");
  document.body.appendChild(container);
  let tilesHTML = "";
  for (let i = 0; i < numTiles; i++) {
    let randomNum = Math.floor(Math.random() * signsDouble.length);
    let tile = signsDouble.splice(randomNum, 1)[0]; // [0] references 1st elem since splice creates one elem array
    tilesHTML += `<div class="tile" id="tile${i}">${tile}</div>`;
  } //end of for loop
  container.innerHTML = tilesHTML;
} //end of createStructure function

window.onload = createStructure(12); // specify the number of tiles here
1 Like
11

@camperextraordinaire thanks for taking time to give me feedback and play around with the code.
So it turns out I didn’t need a while loop at all. I had this feeling, but no clue how to approach it.

There are other nice features I need to add. I will share the link to the whole game, when I’m done with it.
Thank you very much!