Как при клике на элемент с классом получить его значение?

Question

[Даниил Сугоняев]

Вроде бы банальная задача, но поставила меня в тупик. Контент генерируется постоянно (это субититры к видео). Каждое слово обернуто в div c классом, задача при клике правой кнопкой мыши получить значение и записать в переменную, при клике на следующее слово добавить значение. Я реализовал это следующим образом:

sub.addEventListener('mouseover', function (e) {
for (i = 0; i < chat.length; i++) {
        chat[i].addEventListener('contextmenu', function (e) {
            e.preventDefault();
            container += (this.innerText + ' ');
            this.style.background = 'lime';
            console.log(container)
        });
    }
}

То есть в начале я слушаю событие наведения, так как контент меняется. Потом при нажатии запускается перебор псевдомассива и записывается текущее значение. Но он записывает не одно значение, а дублирует его. Не могу понять как вывести из цикла одно значение.
И вообще подскажите правильный ли подход я использую?

Answer 1

[Роман Ямчук]

Проблема в особенностях js, используйте замыкание

var container = '';
sub.addEventListener('mouseover', function (e) {
	for (i = 0; i < chat.length; i++) {
  
  	var text = (function(i){
  	
    		var container;
    
        chat[i].addEventListener('contextmenu', function (e) {
            e.preventDefault();
            container = this.innerText + ' ';
            this.style.background = 'lime';
        });
        
        return container;
		})(i);
    
    container += text;

   }
}

Подробнее

Comments

[Даниил Сугоняев]

Сейчас при клике на каждый новый элемент его значение перезаписывается. А как сделать, чтобы оно добавлялось к предыдущему?

[Роман Ямчук]

Даниил Сугоняев: отредактировал пример