-1

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

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

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

Gelloiss
  • 919
  • @Air В том, что я не знаю как это сделать. Вот событие выполняется, все ок. Но как мне получить этот элемент в переменную, чтобы дальше еще кое-как с ним работать – Gelloiss Mar 19 '20 at 19:09
  • 1
    a colorSelector[i] это что такое? –  Mar 19 '20 at 19:10
  • @Igor Это переменная, в которой будет храниться последний элемент с таким классом, но не тот, на которого был клик. То есть, например у меня 3 элемента. Я кликнул на второй элемент, то есть colorSelector[1], но под конец выполнения цикла в colorSelector[i] у меня будет colorSelector[2], хотя кликнул я на colorSelector[1] – Gelloiss Mar 19 '20 at 19:13
  • @Air Это переменная, в которой будет храниться последний элемент с таким классом, но не тот, на которого был клик. То есть, например у меня 3 элемента. Я кликнул на второй элемент, то есть colorSelector[1], но под конец выполнения цикла в colorSelector[i] у меня будет colorSelector[2], хотя кликнул я на colorSelector[1] – Gelloiss Mar 19 '20 at 19:14
  • @Gelloiss это точно? –  Mar 19 '20 at 19:15
  • Да. Это было первое, что я попробовал. После этого около часа гуглил и вот лишь потом задал вопрос – Gelloiss Mar 19 '20 at 19:15
  • @Gelloiss нет, это не точно –  Mar 19 '20 at 19:18
  • 5
    Возможный дубликат вопроса: Как получить индекс элемента массива – Air Mar 19 '20 at 19:19
  • Почитай ответ Grundy в моем вопросе... – Air Mar 19 '20 at 19:20
  • @Igor Точно. Сами посмотрите. В этом коде я добавляю элементу тестовый аттрибут. И он добавляется не тому элементу, по которому был клик, а последнему. https://jsfiddle.net/30fk9jm7/ – Gelloiss Mar 19 '20 at 19:24
  • @Gelloiss У Вас нарушена причинно-следственная связь. –  Mar 19 '20 at 19:42
  • Подскажите, тогда как правильно, пожалуйста? У меня есть несколько цветов. Изначально выбран itemRed. Эта функция должна при клике переключать на тот цвет, на который был клик. + добавлять css класс. Класс я успешно добавляю, но как мне сохранить новый выбранный цвет? – Gelloiss Mar 19 '20 at 19:44
  • @Gelloiss Используйте переменную lastClicked - см. ответ. –  Mar 19 '20 at 19:46

1 Answers1

0
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>
  • и в какой переменной после этого у меня будет элемент для которого было применено событие click? Вы же просто переписали мой код – Gelloiss Mar 19 '20 at 19:11
  • @Gelloiss в переменной clicked –  Mar 19 '20 at 19:12
  • @Gelloiss Нажмите в ответе кнопку "Выполнить код" и покликайте на зеленые прямоугольники. –  Mar 19 '20 at 19:28
  • Внутри функции события onclick это легко сделать, понятное дело. Но мне нужно после функции, а не в самой функции, получить доступ к элементу – Gelloiss Mar 19 '20 at 19:35
  • Понимаете, мне не просто в консоль вывести надо. Это я бы не спрашивал) Мне надо как-то сохранить элемент в переменную, чтобы после выполнения функции клика, я мог продолжить с ним работать. Вот поэтому и есть этот вопрос у меня! – Gelloiss Mar 19 '20 at 19:42
  • @Gelloiss Используйте переменную lastClicked - см. ответ. –  Mar 19 '20 at 19:59