Создание <div>в случайном порядке и в случайной позиции

Question

Я пытаюсь создать мини-игру, используя JavaScript, HTML и CSS. Он имеет структуру стола 4х4. Каждая строка моей таблицы запоминается внутри тега <section>. Каждая <section> монета составляет 4 <div> с. Я хотел бы, чтобы при нажатии кнопки появлялся один случайный элемент таблицы. Кроме того, было бы здорово, если бы элементы появлялись в случайном порядке.

Вот часть моего кода:

<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>

Итак, моя цель: иметь функцию для создания одного элемента в появляется время (я назову это атрибутом onClick в кнопке). Элемент будет случайным из таблицы.

Кто-нибудь может мне помочь? Большое спасибо

Answer 1

Следующий фрагмент встроенного кода реализует случайное появление элементов сетки и демонстрирует некоторые (надеюсь) полезные концепции:

• Css макет с использованием свойства display для табличного макета;
• Центрирование содержимого с помощью Css свойства display: flex;
• Programmati c доступ к элементам DOM с использованием document.querySelector(...), document.querySelectorAll(...);
• DOM NodeList - это не массив. Подобных сюрпризов предостаточно, справочная документация и спецификации - ваш друг. Документы, а не видео YouTube ...

Помните, что значения атрибутов id не должны быть числовыми c. Избегайте чрезмерной оптимизации - выбор элементов, которые еще не отображаются, чрезвычайно примитивен, чем больше элементов видно, тем больше попыток требуется для поиска скрытого элемента. Однако в ответ на взаимодействие с медленными людьми эффективность не является проблемой ...;)

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>