Как получить созданный элемент?

Question

[Gagatyn]

Здравствуйте. События. При нажатие на кнопку создается тег (код). Как получить этот элемент(ы) и работать с ним(и) дальше?

Answer 1

[ikerya]

Можно назначить слушатель элементу (вы пытаетесь повесить обработчик на событие click для div-ов, но на элементы, которые будут добавлены в ходе работы вашего скрипта, этот обработчик не будет действовать) после добавления его в DOM:

var cDiv = document.querySelector('button'),
		el = document.getElementsByTagName('div');

var click = e => {
  e = document.createElement('div');
  e.setAttribute('class', 'sq');
  document.body.appendChild(e);
  el = e;
  let elX = Math.floor(Math.random() * (151 - 50)) + 50;
  let elY = Math.floor(Math.random() * (151 - 50)) + 50;
  with(e.style) {
    position = 'absolute';
    width = elX + 'px';
    height = elY + 'px';
    background = '#f00';
    zIndex = '-1';
    border = '2px solid #000';
    top = Math.floor(Math.random() * (window.innerHeight - elY)) + 'px';
    left = Math.floor(Math.random() * (window.innerWidth - elX)) + 'px';
  }
  
	e.addEventListener('click', info);
};

var info = e => {
	console.log(e.target);
};

cDiv.addEventListener('click', click);

Comments

[Negwereth]

1) Тут лучше использовать делегирование
2) Не использовать with

[Gagatyn]

Negwereth: не могли бы вы указать мне, где применить делегирование? Типа этого document.addEventListener('click', e => alert(e));
Но как? И при нажатии на кнопку будет тоже самое. Нужно обернуть div'ом и там создавать?

[Negwereth]

Gagatyn: если у вас все эти элементы находятся в одном родителе, слушатель можно повесить на него. Конкретный элемент, на котором будет клик, вы получите через event.target