СreateElement — как взаимодействовать с созданным элементом?

Question

[Антон Михайлов]

Здравствуйте, коллеги!

Столкнулся с такой проблемой.
При определенном медиазапросе нужно было добавить 3 элемента внутрь родителя с теми же классами. Всего должно быть 6 одинаковых элементов с одним классом. Роль элементом - кнопки для кликов.
Когда я создал один дополнительный элемент через сreateElement - все работало, я мог кликать по нему, интерактив был.
НО, когда через цикл for я создал сразу 3 элемента, связь прекратилась. Я не мог взаимодействовать ни с одним из вновь созданных элементов.

Вопрос:
Как взаимодействовать с псевдомассивом созданных элементов в моем случае? Работаю на нативном JS.

Вот код:

/*Суда добавляем еще 3 div*/
 <div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

// JS
// Первый вариант - Добавляем 1 элемент - все работает

function addDiv() {
  if (mediaWidth.matches) {
 newBox.classList.add('box');
  box[2].after(newBox);
  newBox.innerHTML= '0';
 } else {
    newBox.remove();
 }
}
addDiv();

// Второй вариант - НЕ работает интерактив
// Добавляем 3 DIV сразу через цикл For и append родителя Wrapper

function addDiv() {
      if (mediaWidth.matches) {
        for (let i = 0; i < 3; i++) {
          const newBox = document.createElement('div');
          newBox.classList.add('box');
          wrapper.append(newBox);
          newBox.innerHTML = '0';
          // console.log(newBox.length); выдает Undefined
        }
      }
    }
    addDiv();

Comments

[Сергей Соколов]

Вопрос не полностью понятен:
что такое box, wrapper, mediaWidth? Где обработчики событий, «интерактив», о котором пишете.
Сделайте jsFiddle, демонстрирующий проблему целиком.

Answer 1

[bingumd]

const box = []

function addDiv() {
      if (mediaWidth.matches) {
        for (let i = 0; i < 3; i++) {
          const newBox = document.createElement('div');

          newBox.classList.add('box');
           newBox.innerHTML = '0';
           box.push(newBox)

          wrapper.append(newBox);
          // console.log(newBox.length); выдает Undefined
        }
      }
}
addDiv();

 console.log(box) // новые элементы

Comments

[Антон Михайлов]

Спасибо.
Думаю, это решение на данном этапе

Answer 2

[Алексей Дубровин]

1) Вы создаёте константу в цикле? - Константа не изменяемая переменная.( Неправильно ) В цикле она определяется минимум 3 раза)
2) С чего вы взяли что у него есть длина? Это дом элемент. Длина существует только в итерируемых объектах.
3) У вас всё должно работать вы в wraper добавили 3 элемента. Его и выведите в консоль

Comments

[Антон Михайлов]

Спасибо за совет.
1. Бог с ней с const, let ничего не меняет
2. console.log(box.length); // 3
3. Что именно Вы прелагаете вывести в консоль? Напишите. Мне не нужно взаимодествовать с Wrapper через консоль. Мне нужно взаимодействовать с каждым созданным элементом по отдельности.

[Вадим]

Алексей Дубровин,

1) Вы создаёте константу в цикле? - Константа не изменяемая переменная.( Неправильно ) В цикле она определяется минимум 3 раза)

В рамках цикла автор константу и не изменяет. На каждую итерацию цикла, так как у const и let блочная область видимости, будет создана своя переменная newBox. Так что всё корректно. Определение переменной через const не то же самое что классическая константа, из разряда числа Pi.

Антон Михайлов,

// console.log(newBox.length); выдает Undefined

Всё верно выдаёт. Вы не назначали свойства length вновь созданному div, а по умолчанию у него нет такого свойства.

2. console.log(box.length); // 3

Так box или newBox? Что такое box Вы нам не показываете.

Я не мог взаимодействовать ни с одним из вновь созданных элементов.

Не вижу чтобы Вы добавляли созданному элементу обработчик события.
Но вообще в таком случае пользуются деллигированием.

[Алексей Дубровин]

Вадим, У всего есть семантика. У константы семантика в том что это уникальный элемент данных который определяется 1 раз и используется в дальнейшем.
Не имеет значение где она определена в цикле или нет.
Корректность решение не всегда значит что это хорошо.

[Вадим]

Алексей Дубровин, Всё верно. И семантика переменной, определённой через const, говорит о том, что её значение меняться не будет. Что полностью соблюдено. Вы не можете воспользоваться этой переменной вне итерации цикла. И в рамках каждой итерации значение не изменяется.
Повторюсь, переменная, определённая через const - это не классическая математическая константа, которая имеет одно и то же значение в рамках всего жизненного цикла продукта.

[Антон Михайлов]

Вадим,
2. Я не добавлял все переменные в вопрос, думал будет понятно
const box = document.querySelectorAll('.box');
Обработчик добавлял, поверьте. В моем примере он не давал результата.
Решение bingumd считаю верным. Других решений пока не вижу.

[Вадим]

Антон Михайлов, Если Вы добавили обработчик события на все элементы с определённым классом, а потом создали ещё таких же элементов и добавили их в DOM, то на них этих обработчиков не будет.

[Антон Михайлов]

Вадим,
В этом и суть моего вопроса.
Решение предложите?

[Вадим]

Антон Михайлов, Предложил в первом же комментарии. Ссылку открывали? Читали?

[Антон Михайлов]

Вадим,
Делегирование? Да, видел. То же вариант.

window.addEventListener('click', (event)=> {
  let f = event.target;
console.log(f); // Укажет div на котором был клик
})

Спасибо)

[Вадим]

Антон Михайлов, Ну только window это Вы прям глобально замахнулись :-)
В Вашем случае wrapper более подходящее место, исходя из той информации, что Вы предоставили.

[Антон Михайлов]

Вадим,
Верно.
К слову сказать, как я решил свою задачу из вопроса до обращения на Хабр.
Создал сразу 6 элементов в HTML, три спрятал через display none. На мобилке показал их. Все.

[Вадим]

Антон Михайлов, Да, такое решение тоже имеет место быть, особенно если в элементах, например, есть важная для SEO информация. А так же такое решение не требует js, соответственно, будет работать даже если у пользователя отключен js или js где-то упал с ошибкой и больше не выполняется.

[Антон Михайлов]

Вадим,
Еще раз спасибо.
Всего хорошего)

Answer 3

[Антон Михайлов]

Всем спасибо.
Получено кроме моего, 2 решения, от Вадим и от bingumd

+ мое решение без JS
Создал сразу 6 элементов в HTML, три спрятал через display none. На мобилке показал их. Все.