2

Итак, есть у меня вот такая конструкция:

const PC_Card_Hand = document.querySelector('.comp-card-hand1');
PC_Card_Hand.appendChild(DECK_PC[0].getHTML());

Она считывает первое значение из массива DECK_PC, а затем создает элемент DIV с классом card с данными из массива в элементе div с классом comp-card-hand1 и все прекрасно работает. Вот только есть две проблемы:

  1. Элементов у меня в массиве больше чем один
  2. Элементов div с классом comp-card-hand1 тоже больше чем один

А все попытки как-то данный процесс зациклить и заставить элементы из массива расставляться в свободные divы не приводят ни к чему хорошему и все данные упорно запихиваются в самый первый найденный элемент div с классом comp-card-hand1

Итак вопрос: как мне решить данную проблему и заставить данные из массива записываться в разные (свободные) div с классом comp-card-hand1?

УТОЧНЕНИЕ: массив содержит в себе 50 элементов, а элементов div с классом comp-card-hand1 3 штуки. Я хочу, чтобы в эти дивы вставлялись первые 3 значения массива DECK_PC. А если какой-то из них освобождается, то туда должен вставляться следующий по очереди элемент.

2 ответа 2

2
const cards = document.querySelectorAll('.comp-card-hand1');
//                                  ^^^
7
  • Такой вариант я попробовал один из первых. В результате, консоль выдала ошибку: Uncaught TypeError: PC_Card_Hand.appendChild is not a function at battle.js:4:16 (anonymous) @ battle.js:4 14 янв 2022 в 9:55
  • @drakoblack, потому что у массивов нет appendChild.
    – Qwertiy
    14 янв 2022 в 11:55
  • а причем здесь массив, когда речь идет о div с классом comp-card-hand1 у которого appendChild создает div с классом card в который уже передает данные из массива? С элементом querySelector все работает прекрасно, но только на 1 див, а у меня их несколько. При использовании querySelectorAll консоль начинает ругаться... 14 янв 2022 в 12:01
  • @Ceri, ну только не совсем массив, но примерно)
    – Qwertiy
    14 янв 2022 в 15:57
  • вот автор вопроса написал хороший развёрнутый ответ. есть чему поучиться, правда? 16 янв 2022 в 11:42
2

Действительно нужно использовать querySelectorAll(), но так как это меняет тип данных в переменной, то обращение к ее элементам так же необходимо изменить, словно это элементы массива и соответственно, чтобы записать значение какого-то элемента вашего массива в конкретный div класса .comp-card-hand, необходимо сначала указать номер этого элемента [i], а если необходимо заполнить все элементы, то лучше организовать все это через цикл.

const PCHand = document.querySelectorAll('.comp-card-hand');
for (var i = 0; i < DECK_PC.length; i++) {
    PCHand[i].appendChild(DECK_PC[i].getHTML());
  }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.