js Как получить элемент для которого применяется onclick по классу в переменную?

Question

Есть несколько элементов с одним классом, нужно по нажатию на элемент провести некоторые действия и получить в переменную этот элемент.

colorSelector = document.getElementsByClassName('colorSelector'); //Считали все элементы с классом для выбора цвета
  for (let i = 0; i < colorSelector.length; i++) { //Идем по каждому элементу
    colorSelector[i].onclick = () => changeColorSelected(colorSelector[i].getAttribute('class').split(' ')[1]); //Передаем элемент по которому нажали
  }

Собственно клик я ловлю и применяю нужные свойства. Кстати, скажите, пожалуйста, если я не правильно делаю клик по классу. Но вот как мне получить в переменную элемент на который я кликнул?

Answer 1

var lastClicked = null;

colorSelector = document.getElementsByClassName('colorSelector');
for (let i = 0; i < colorSelector.length; i++) {
  colorSelector[i].onclick = function(e) {
    var clicked = this;
    // or
    var clicked = colorSelector[i];
    // or
    var clicked = e.target;

    lastClicked = clicked;
  };
}

var colorSelector = document.getElementsByClassName('colorSelector');
for (let i = 0; i < colorSelector.length; i++) {
  colorSelector[i].onclick = function(e) {
    var clicked1 = this;
    // or
    var clicked2 = colorSelector[i];
    // or
    var clicked3 = e.target;

    console.log(clicked1.textContent, clicked2.textContent, clicked3.textContent);
  };
}

.colorSelector {
  border: 1px solid black;
  padding: 10px;
  background: lightgreen;
}

<div class="colorSelector">A</div>
<div class="colorSelector">B</div>
<div class="colorSelector">C</div>

БЛОГ НА HUSL

js Как получить элемент для которого применяется onclick по классу в переменную?

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