Вам нужно переместить код, который устанавливает обработчики событий, так, чтобы он находился вне вашего цикла for и выполнялся после его завершения.Затем вместо .querySelector(), который возвращает только первый соответствующий элемент, вам нужно .querySelectorAll(), чтобы вернуть все соответствующие элементы.После этого вы будете перебирать все эти элементы и настраивать обработчик.
Вам также необходимо изменить способ объявления переменной obj, чтобы она находилась в области действия вне * 1006.* петля.Сделайте это, объявив его непосредственно перед циклом, но назначив его внутри цикла:
let obj = null; // Now, obj is scoped so it can be accessed outside of the loop
for (let i = 0; i < data.lists.length; i++) {
obj = eval(data.lists[i]);
И поместите следующее сразу после окончания цикла for:
// Get all the .list elements into an Array
const list = Array.prototype.slice.call(document.querySelectorAll('.list'));
// Loop over the array and assign an event handler to each array item:
list.forEach(function(item){
item.addEventListener('click', () => {
listNav.listNav(obj.name);
listSidebarL.listSidebarL();
listSidebarR.listSidebarR();
listMain.listMain(obj.items);
});
});
Свсе это говорит, ваш подход здесь действительно не очень хорош.Почти всегда есть другой вариант, чем использовать eval() для чего-либо, и использование .innerHTML обычно стоит избегать из-за его последствий для безопасности и производительности.Использование его в цикле - почти всегда плохая идея.Вы действительно должны использовать DOM API для создания новых элементов, их настройки и внедрения в DOM.Если вы должны использовать .innerHTML, то создайте строку в вашем цикле, а после цикла вставьте строку в DOM через .innerHTML, только один раз.