Kак из массива вставлять все его элементы в теги?

Question

Подскажите как из массива вставлять все его элементы в теги. (прошу заметить что на html страничке 10 тегов span и в каждый нужно вставить из массива слово Без повторения)

Код который есть сейчас(но надо что бы все из массива вставлялось без повторений):

 let sp = document.querySelectorAll('span')
    
    function randomWord(word) {
      console.log(word)
      for (let i = 0; i < word.length; i++) {
        for (let k = 0; k < sp.length; k++) {
          sp[k].innerHTML = word[random()];
        }
      }
    }
    
    function random() {
      return Math.floor(Math.random() * 10);
    }

Answer 1

function random(min, max) {
  return Math.random() * (max - min) + min;
}

const words = [`На`, `самом`, `деле,`, `жизнь`, `проста,`, `но`, `мы`, `настойчиво`, `её`, `усложняем.`];

Array.from(document.querySelectorAll(`span`)).reduce((list, span) => {
  const index = Math.floor(random(0, list.length));
  span.innerText = list.splice(index, 1);
  return list;
}, words);

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<br/>
<author>Конфуций</author>

Answer 2

Вывод из массива без дубликатов:

let sp = document.querySelectorAll('span')

const words = [1, 2, 3, 4, 5, 6, 7];

function randomWord(word) {
  if (sp.length > word.length) return;
  const notSelected = [ ...word ]; // Создаем копию(поверхностно) массива
  for (let i = 0; i < sp.length; i++) {
    const res = random(notSelected.length);
    sp[i].innerText = notSelected[res];
    notSelected.splice(res, 1);
  }
}

function random(max) {
  return Math.floor(Math.random() * (max - 1));
}

randomWord(words);

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

Ограничение, количество span должно совпадать или быть мень количества "слов"

P.S.: Коротко, не значит понятнее или красивее, но оставлю, как можно цикл в одну строку уложить

for (let i = 0; i < sp.length; i++) sp[i].innerText = notSelected.splice(random(notSelected.length), 1)[0];

БЛОГ НА HUSL

Kак из массива вставлять все его элементы в теги?

Ответы (2 шт):