Uncaught ReferenceError: функция не определена с помощью onclick

Я пытаюсь сделать пользовательский скрипт для сайта, чтобы добавить пользовательские эмоции. Однако я получаю много ошибок.

Вот функция:

function saveEmotes() {
    removeLineBreaks();
    EmoteNameLines = EmoteName.value.split("\n");
    EmoteURLLines = EmoteURL.value.split("\n");
    EmoteUsageLines = EmoteUsage.value.split("\n");

    if (EmoteNameLines.length == EmoteURLLines.length && EmoteURLLines.length == EmoteUsageLines.length) {
        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;" onclick="appendEmote(\'' + EmoteUsageLines[i] + '\')"><img src="' + EmoteURLLines[i] + '" /></span>';
            } else {
                alert("The maximum emote(" + EmoteNameLines[i] + ") size is (36x36)");
            }
        }
    } else {
        alert("You have an unbalanced amount of emote parameters.");
    }
}

onclick span onclick вызывает эту функцию:

function appendEmote(em) {
    shoutdata.value += em;
}

Каждый раз, когда я нажимаю кнопку с атрибутом onclick, я получаю эту ошибку:

Uncaught ReferenceError: функция не определена.

Любая помощь будет оценена.

Спасибо!

Обновить

Я пытался с помощью:

emoteTab[2].innerHTML += '<span style="cursor:pointer;" id="'+ EmoteNameLines[i] +'"><img src="' + EmoteURLLines[i] + '" /></span>';
document.getElementById(EmoteNameLines[i]).addEventListener("click", appendEmote(EmoteUsageLines[i]), false);

Но я получил undefined ошибку.

Вот сценарий.

Я попытался сделать это, чтобы проверить, работают ли слушатели, и они не для меня:

emoteTab[2].innerHTML = '<td class="trow1" width="12%" align="center"><a id="togglemenu" style="cursor: pointer;">Custom Icons</a></br><a style="cursor: pointer;" id="smilies" onclick=\'window.open("misc.php?action=smilies&amp;popup=true&amp;editor=clickableEditor","Smilies","scrollbars=yes, menubar=no,width=460,height=360,toolbar=no");\' original-title="">Smilies</a><br><a style="cursor: pointer;" onclick=\'window.open("shoutbox.php","Shoutbox","scrollbars=yes, menubar=no,width=825,height=449,toolbar=no");\' original-title="">Popup</a></td></br>';
document.getElementById("togglemenu").addEventListener("click", changedisplay,false);

Ответ 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" и теперь они работают.