Ответ 1

Никогда не используйте .onclick() или подобные атрибуты из usercript! (Это также плохая практика на обычной веб-странице).

Причина заключается в том, что пользовательские скрипты работают в изолированной среде ( "изолированный мир" ), а onclick работает в области целевой страницы и не видит никаких функций, создаваемых вашим script.

Всегда используйте addEventListener() ^Doc (или эквивалентную библиотечную функцию, такую ​​как jQuery . on()).

Итак, вместо кода вроде:

something.outerHTML += '<input onclick="resetEmotes()" id="btnsave" ...>'

Вы будете использовать:

something.outerHTML += '<input id="btnsave" ...>'

document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);

В цикле вы не можете передавать данные в прослушиватель событий, как показано ниже. документ. Плюс каждый раз, когда вы меняете innerHTML, вы уничтожаете предыдущих прослушивателей событий!

Без рефакторинга вашего кода вы можете передавать данные с атрибутами данных. Поэтому используйте такой код:

for (i = 0; i < EmoteURLLines.length; i++) {
    if (checkIMG (EmoteURLLines[i])) {
        localStorage.setItem ("nameEmotes", JSON.stringify (EmoteNameLines));
        localStorage.setItem ("urlEmotes", JSON.stringify (EmoteURLLines));
        localStorage.setItem ("usageEmotes", JSON.stringify (EmoteUsageLines));
        if (i == 0) {
            console.log (resetSlot ());
        }
        emoteTab[2].innerHTML  += '<span style="cursor:pointer;" id="' 
                                + EmoteNameLines[i] 
                                + '" data-usage="' + EmoteUsageLines[i] + '">'
                                + '<img src="' + EmoteURLLines[i] + '" /></span>'
                                ;
    } else {
        alert ("The maximum emote (" + EmoteNameLines[i] + ") size is (36x36)");
    }
}
//-- Only add events when innerHTML overwrites are done.
var targetSpans = emoteTab[2].querySelectorAll ("span[data-usage]");
for (var J in targetSpans) {
    targetSpans[J].addEventListener ("click", appendEmote, false);
}

Где appendEmote похож:

function appendEmote (zEvent) {
    //-- this and the parameter are special in event handlers.  see the linked doc.
    var emoteUsage  = this.getAttribute ("data-usage");
    shoutdata.value += emoteUsage;
}

ВНИМАНИЕ:

• Ваш код повторно использует один и тот же идентификатор для нескольких элементов. Не делайте этого, это недействительно. Данный идентификатор должен появляться только один раз на странице.
• Каждый раз, когда вы используете .outerHTML или .innerHTML, вы удаляете любые обработчики событий на затронутых узлах. Если вы используете этот метод, остерегайтесь этого факта.

Ответ 2

Я получаю сообщение об ошибке (я использую Vue), и я переключил мой onclick="someFunction()" на @click="someFunction" и теперь они работают.