Как добавить текст в созданный прямоугольник, используя JS - PullRequest
Новая
       64

Как добавить текст в созданный прямоугольник, используя JS

0 голосов
/ 04 мая 2020

Создаю генератор имен. Я создал поле ввода и кнопку добавления. Введите имя, нажмите «Добавить» -> имя будет добавлено в список ul. Затем я ввожу количество команд и создаю количество ящиков, где я буду генерировать случайные имена из списка. Вот HTML: 

 <div class="form-group">
              <h6 class="text-white mt-5">Number of groups</h6>
              <input type="number" class="num" placeholder="enter num of groups"> 
              <input type="button" id="assign" onclick="assign()" value="Assign">
            </div>



              <div class="form-group">

                <input type="text" class="inputName" placeholder="Enter name">

                <input type="button" id="addName" onclick="addPlayer()" value="Add Player" /><br>

              </div>

            <input type="button" id="clearList" onclick="clear()" value="Clear List" />
            <input type="button" id="generate" onclick="generate()"  value="Generate Teams" />

Вот мой JS: ошибок в консоли нет! 

let name = document.querySelector('.inputName');
function addPlayer() {

let li = document.createElement('li');

if(name.value === '') {
  alert('enter name');
  return false;
} else {
  li.innerHTML = name.value;
  name.value = '';
}
let list = document.querySelector('#list');

list.append(li);
}

function assign() {
  let nums = parseInt(document.querySelector('.num').value);
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.classList.add('boxList');
    box.innerHTML = `<div>Group ${i + 1}</div>`;
    document.querySelector('.groups').appendChild(box);
  }

}


  function generate(){
  let listPlay = document.querySelectorAll('li').value;

  for (i = 0; i<listPlay; i++) {
    let randName =  Math.floor(Math.random() * listPlay[i]);
    box.innerHTML = randName;
  }

}

ПРОБЛЕМА В ТО, ЧТО ЯЩИКИ ПУСТЫ И ВНУТРЕННИЕ HTML НЕТ РАБОТА

...