hellomynameisA
hellomynameisA

Reputation: 634

Making < div > appear in a random order and in random position

I'm trying to create a minigame using JavaScript, HTML and CSS. It is structured as a table 4x4. Every row of my table is memorized inside a <section> tag. Each <section> cointains 4 <div>s. I would like to make one random element of the table appear when I hit a button. Also, it would be great to have elements appear in a random order.

Here's part of my code:

<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="11"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="21"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="31"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="41"></i>
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="12"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="22"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="32"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="42"></i>
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="13"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="23"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="33"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="43"></i>   
</section>
<section class="oggettoElements">
    <i class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="14"></i>
    <i class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="24"></i>
    <i class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="34"></i>
    <i class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="44"></i>
</section>

So, my goal is: have a function to make one element at a time appear (I'll call it with an onClick attribute in a button). The element will be a random one from the table.

Can anybody help me? Thank you very much

Upvotes: 0

Views: 360

Answers (1)

collapsar
collapsar

Reputation: 17288

The following inline code snippet implements the random apparition of grid elements and demonstrates some (hopefully) helpful concepts:

  • Css-based layout using the display property for tabular layout;
  • Content centering with Css property display: flex;
  • Programmatic access to DOM element(s) using document.querySelector(...), document.querySelectorAll(...);
  • A DOM NodeList is not an array. Similar surprises abound, reference docs & specs are your friend. The docs, not YouTube videos ...

Remember that id attribute values must not be numeric. Avoid over-optimizing - the selection of elements not yet on display is extremely primitive, the more elements are visible, the more attempts are needed to find a hidden element. However, in response to interaction with slow humans, efficiency is not an issue ... ;)

let b_allVisible = false
  ;
  
function showme ( eve ) {
    let e_chosen
      , n_c
      , n_r
      ;
      
    b_allVisible = !(
      Array
        .from(document.querySelectorAll('div[id^="c-"]'))
        .some ( (pe_grid) => { return pe_grid.style.visibility !== 'visible'; } )
    );
    
    if (b_allVisible) {
      document.getElementById('showme').setAttribute('disabled', 'disabled');
    } else {
      do {
          n_c = 1 + Math.floor( 4 * Math.random() ); 
          n_r = 1 + Math.floor( 4 * Math.random() ); 
          e_chosen = document.querySelector(`#c-${n_c}${n_r}`);
              // Here (referencing an element by their id), 'document.getElementById(`c-${n_c}${n_r}`)' can also be used.
              // Note the absence of the selector marker '#' for ids
      } while ( e_chosen.style.visibility === 'visible' );

      e_chosen.style.visibility = 'visible';
    }
} // showme
body > section {
    display:    table;
    padding:    20px;
}
section.oggettoElements {
    display:    table-row;
}
section.oggettoElements > div {
    display:    table-cell;
    border: solid 1px black;
    height: 30px;
    width:  30px;
    visibility: hidden;
}
section.oggettoElements > div > div {
    display:            flex;
    height:             30px;
    align-items:        center;
    justify-content:    center;
}
div > span {
    flex: 1;
    text-align: center
}
<section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-11"><div><span>01</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-21"><div><span>02</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-31"><div><span>03</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-41"><div><span>04</span></div></div>
    </section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-12"><div><span>05</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-22"><div><span>06</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-32"><div><span>07</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-42"><div><span>08</span></div></div>
    </section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-13"><div><span>09</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-23"><div><span>10</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-33"><div><span>11</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-43"><div><span>12</span></div></div>   
    </section>
    <section class="oggettoElements">
        <div class="far fa-newspaper oggetto"         draggable="true" style="color: #0000FF;" id="c-14"><div><span>13</span></div></div>
        <div class="fas fa-wine-glass-alt oggetto"    draggable="true" style="color: #008000;" id="c-24"><div><span>14</span></div></div>
        <div class="fas fa-wine-bottle oggetto"       draggable="true" style="color: #FFD700;" id="c-34"><div><span>15</span></div></div>
        <div class="fas fa-apple-alt oggetto"         draggable="true" style="color: #8B4513;" id="c-44"><div><span>16</span></div></div>
    </section>
</section>
<button id="showme" name="showme" onclick="showme()">Show Me!</button>

Upvotes: 1

Related Questions