Блог

Я хотел бы создать кнопку, похожую на эти:

1. оранжевая кнопка «Создать случайный список» отсюда
2. Серая кнопка «Создать еще один!» отсюда

На данный момент я сделал следующее:

=========================================================================

    <button id = "button" onclick = "random_element()">click 
   here</button>   
   <h1 style = "color:pink;"> Project Title</h1>
   <p id = "ZZZ" style = "font-size: 14px; color: 
   #a8bcff;"></p>
<script>  
   var zzz = document.getElementById('ZZZ'); 

   var arr = ["aaa", "bbb", "ccc", "ddd"];  
 // how do we substitute these strings with HTML lists in arr?
    function random_element() {  
    zzz.innerHTML = arr[Math.floor(Math.random() * arr.length)]; 
                                              } 
</script>
  

     <ol id="list">
      <li>video1 to be randomly chosen/displayed on button click   </li>
      <li>video2 to be randomly chosen/displayed on button click   </li>
      <li>video3 to be randomly chosen/displayed on button click   </li>
      <li>video4 to be randomly chosen/displayed on button click   </li>
     </ol>
  

=========================================================================

Я понимаю, как генерировать случайные элементы в виде текста. Но я не знаю, как создать JS-массив, содержащий все html-списки iframes.

Как правильно ссылаться и ИСПОЛЬЗОВАТЬ html-содержимое между тегами <li></li> внутри массива JavaScript?

Не совсем понятно, чего вы хотите достичь, поэтому я не беспокоюсь о вашем случайном генераторе здесь и просто показываю, как связать группу <li> по их индексации с тем же индексом в показанном массиве.

 var arr = ["aaa", "bbb", "ccc", "ddd"];

const lis = document.querySelectorAll('#list li');

lis.forEach(function(el, i){
   const btn = document.createElement('button');
   btn.textContent = arr[i];
   btn.addEventListener('click', function(){
      // do something with the array value
      console.clear()
      console.log('Btn index:', i, ' array value:', arr[i])
   })
   el.appendChild(btn);
});  

 <ul id="list">
  <li>One  </li>
  <li>Two  </li>
  <li>Three  </li>
  <li>Three  </li>
</ul>