Почему не срабатывает обработчик события правильо?

Question

[ITF]

Есть 4 кнопки сделанные из - div с классом ".menu_img_box", в каждый из них вложен .
При нажатии на кнопку, у картинки на этой кнопке меняется атрибут src.

ResetSelectedItem - функция для сбора уже нажатых кнопок.
SetSelectedItem - функция изменения атрибута src.

function addListener(event, obj, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false);
    } else {
        obj.attachEvent("on"+event, fn);
    }
}

function ResetSelectedItem () {
	var elements = document.querySelectorAll('.menu_img_box > img'); 

	for (var i = 0; i < elements.length; i++) {
		elements[i].src = elements[i].src.replace('_r.png', '.png');
	};
};

function SetSelectedItem (Elem) {
	Elem.firstElementChild.src = Elem.firstElementChild.src.replace('.png', '_r.png');
};


window.onload = function () {
var slideIndex = 1;

	var ImgBoxElem = document.querySelectorAll('.menu_img_box');
	for(Elem of ImgBoxElem) {
		addListener('click', Elem, function (e) {
				ResetSelectedItem();
				SetSelectedItem(Elem);
			});		
	};
	
};

Сейчас происходит следующее:
При нажатии на кнопку, отрабатывает сброс, и функция установки атрибута применяется на 4-ую кнопку.
Что не правильно, т.к. нужно на конкретную кнопку.

если в функцию вместо "Elem" я буду передавать e.target, она отработает, но тут почему-то начинается интересное. Отрабатывает click только по самому блоку div, если я попадаю по иконке (img) в div'e - клик не срабатывает.

Что делать? Как сделать что бы менялось при клике как надо и кликало по всей кнопке?

Comments

[WbICHA]

Ого, какая древность. Сколько лет этому коду?

При нажатии на кнопку, отрабатывает сброс, и функция установки атрибута применяется на 4-ую кнопку.

Это называется работа с варами.
for(Elem of ImgBoxElem)
Тут у тебя каждый раз перезаписывается значение переменной (которая ещё и с большой буквы называется по неведомой причине).

[ITF]

WbICHA, 3 дня... которые мучаюсь.
Хочу без библиотек пока.

Тогда как мне повесить сразу на все элементы одну и ту же функцию обработки? И разумеется ловить её?

[WbICHA]

ITF, ппц, а поновее гайдов не находил?

const imgBoxElem = document.querySelectorAll('.menu_img_box');

imgBoxElem.forEach((elem) => {
 elem.addEventListener('click', () => {
  ResetSelectedItem();
  SetSelectedItem(elem);
 }
}
// or
  for(const elem of imgBoxElem) {
    addListener('click', elem, () => {
        ResetSelectedItem();
        SetSelectedItem(elem);
      });		
  };

[ITF]

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

Попробую рассуждать, а ты поправишь.

Conc - не обновляемая константа.
Т.е. при var он просто проходился циклом и в конце присваивался последний div.
При const он в elem запихивает div на который отловилось событие, но при дальнейшем прохождении не обновляет значение.

[WbICHA]

ITF, https://medium.com/nuances-of-programming/%D0%B2-%...

Answer 1

[ITF]

WbICHA WbICHA

WbICHA @WblCHA 

const imgBoxElem = document.querySelectorAll('.menu_img_box');

imgBoxElem.forEach((elem) => {
 elem.addEventListener('click', () => {
  ResetSelectedItem();
  SetSelectedItem(elem);
 });
});