M
M
Mark Berezovsky2020-12-08 21:38:59
JavaScript
Mark Berezovsky, 2020-12-08 21:38:59

Why do references to HTML elements disappear in variables?

Greetings! I recently encountered this problem:
I have a method that defines variables that refer to HTML elements and are used there. Everything seems to be fine: I call the method 1 time - everything works. But as soon as I call this method one more time (already with other values), then the past variables lose their pointers (since they do not change when the server is loaded, and do nothing at all, even the loader does not disappear).
I will note that I have already checked that with other values, the elements will be absolutely unique and no conflicts will be created. I also checked local method calls - they don't affect variables either.

// Тот самый метод
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;
    }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question