TAMPERMONKEY, Скрипт Элемент добавляется только через раз

Question

TAMPERMONKEY, Скрипт Элемент добавляется только через раз

Кеник 3 Профи (540), на голосовании 1 год назад

Я пишу скрипт на tampermonkey, и при нажатии на кнопку он должен добавлять элемент. Но почему этот элемент добавляется только через раз? Первое нажатие - элемента нет, второе - элемент есть, третье - элемента нет.. Почему так, кто знает?

 (function() { 
    'use strict' 
 
    window.addEventListener('load', function() { 
        let betterTelegramElement = null; 
 
        function addButton() { 
            const menuButton = document.querySelector(".sidebar-tools-button"); 
 
            menuButton.addEventListener('click', function() { 
                if (!betterTelegramElement) { 
                    const divElement = document.createElement("div"); 
                    const spanElement = document.createElement("span"); 
 
                    divElement.className = 'btn-menu-item rp-overflow tgico-char a'; 
                    spanElement.className = 'i18n btn-menu-item-text'; 
                    spanElement.innerHTML = "Настроить BetterTelegram"; 
 
                    divElement.appendChild(spanElement); 
 
                    const plusRoundButton = document.querySelector('.tgico-plusround'); 
 
                    if (plusRoundButton) { 
                        plusRoundButton.parentNode.insertBefore(divElement, plusRoundButton.nextSibling); 
                        betterTelegramElement = divElement; 
                    } 
                } else { 
                    betterTelegramElement.remove(); 
                    betterTelegramElement = null; 
                } 
            }); 
        } 
 
        setTimeout(function() { 
            addButton(); 
        }, 100) 
    }); 
 
})()

Answer 1

Могут быть несколько причин, почему элемент добавляется только через раз при нажатии на кнопку. Вот некоторые возможные проблемы и их решения:

1. Проблемы с асинхронностью: Если в вашем коде присутствуют асинхронные операции, например, загрузка контента или запросы на сервер, то добавление элемента может зависеть от успешного завершения этих операций. В таком случае, вам необходимо убедиться, что элемент добавляется только после того, как асинхронная операция завершена. Для этого можно использовать колбэки, обещания (promises) или асинхронные функции (async/await).

Пример с использованием обещаний:

function addElement() {
// Асинхронная операция, например, загрузка контента
return new Promise((resolve, reject) => {
// Здесь происходит загрузка контента
// После успешной загрузки вызываем resolve()
// В случае ошибки вызываем reject()
});
}

// Пример использования обещания для добавления элемента после загрузки
document.querySelector('button').addEventListener('click', async () => {
await addElement();
// Здесь можно добавить элемент
});

2. Проблемы с обработчиком события: Если обработчик события назначается некорректно или назначается несколько раз, это может приводить к непредсказуемому поведению при нажатии на кнопку. Убедитесь, что обработчик назначается только один раз и что он правильно связан с кнопкой.

3. Проблемы с условием добавления элемента: Проверьте условие, при котором происходит добавление элемента. Если условие неверное или не выполняется при каждом нажатии на кнопку, элемент не будет добавлен.

4. Проблемы с кодом добавления элемента: Проверьте код, который отвечает за добавление элемента. Убедитесь, что он правильно создает и вставляет новый элемент в нужное место на странице.

Если ни одно из вышеперечисленных решений не помогло, укажите больше деталей или предоставьте код, чтобы мы могли дать более точный ответ.

Answer 2

Ну так кто код писал? Разве не вы? И не понимаете что он делает? ?‍♂️
Вы сохраняете элемент в переменную betterTelegramElement и проверяете равна ли она null. Если да, то создаёте элемент, если нет, то удаляете. И так при каждом нажатии.