Приветствую! Недавно столкнулся с такой проблемой:
У меня есть метод, определяющий в себе переменные, которые ссылаются к HTML-элементам, и там же используются. Вроде бы всё хорошо: вызываю метод 1 раз - всё работает. Но как-только я вызываю этот метод еще один раз(уже с другими значениями), то прошлые переменные теряют указатели(так как при подгрузке сервера они не меняются, и вообще ничего не делают, даже лоадер не пропадает).
Я подмечу то, что я уже проверил, что при других значениях элементы будут абсолютно уникальны и конфликтов не создастся. Я также проверил локальные вызовы метода - они тоже не влияют на переменные.
// Тот самый метод
const createTop = (requestType, responseType, id, label) => {
statsContainer.innerHTML += stat('top', label, `top-${id}`);
var container = document.querySelector(`#top-${id}-data`);
var timeSet = document.querySelector(`#top-${id}-time`);
var loader = setLoader(container);
timeSet.onchange = _ => {
loader = setLoader(container);
socket.emit(requestType, id, timeSet.value);
}
socket.on(responseType, data => {
finishLoader(loader);
fade(100, container, _ => {
container.innerHTML = '';
if (data.length == 0) {
container.innerHTML += `<div class="floating-inner-message">Пусто</div>`;
}
data.forEach(c => {
container.innerHTML += statListElement(
c.prefix,
c.name,
c.value
);
})
});
});
statSockets.push(responseType);
socket.emit(requestType, id, timeSet.value);
return container;
}
// Другой метод, использующий его
const renderStats = (type) => {
statSockets.forEach(s => socket.off(s));
statsContainer.innerHTML = '';
switch(type) {
case 'users':
let games = createTop('users-events', 'users-games', 'games', 'Игры');
let calls = createTop('users-events', 'users-calls', 'calls', 'Вызовы команд');
let messages = createTop('users-events', 'users-messages', 'messages', 'Сообщения');
break;
}
}