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

Вот функция:

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.");
    }
}

В 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);

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

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

Всегда используйте 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, вы удаляете все обработчики событий на затронутых узлах. Если вы используете этот метод, остерегайтесь этого факта.

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

Убедитесь, что вы используете модуль Javascript или нет ?! при использовании модулей js6 ваши атрибуты событий html не будут работать. в этом случае вы должны перенести свою функцию из глобальной области в область видимости модуля. Просто добавьте это в свой файл javascript: window.functionName= functionName;

пример:

<h1 onClick="functionName">some thing</h1>

Я думаю, вы поместили функцию в $ (document) .ready ....... Функции всегда предоставляются в $ (document) .ready .......

Я разрешил это в angular с (click) = "someFuncionName()"помощью файла .html для конкретного компонента.

Если функция не определена при использовании этой функции в html, например onclick = 'function ()', это означает, что функция находится в обратном вызове, в моем случае это 'DOMContentLoaded'.