잡히지 않은 ReferenceError : 함수가 onclick으로 정의되지 않았습니다.


84

사용자 지정 이모티콘을 추가하기 위해 웹 사이트에 대한 사용자 스크립트 를 만들려고합니다 . 그러나 많은 오류가 발생했습니다.

기능은 다음과 같습니다.

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속성 이있는 버튼을 클릭 할 때마다 다음 오류가 발생합니다.

포착되지 않은 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
관련 코드 만 게시하십시오. 규칙을 읽으십시오.
alt

1
전체 스크립트에 대한 링크는 게시물에 포함되어야하는 관련 코드 스 니펫 외에도 항상 적절하고 감사 합니다.
Brock Adams

답변:


131

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

루프의 경우 이와 같은 이벤트 리스너에 데이터를 전달할 수 없습니다 . See the doc . 또한 그렇게 변경할 때마다 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;
}


경고 :

  • 코드는 여러 요소에 대해 동일한 ID를 재사용합니다. 이러지 마세요, 유효하지 않습니다. 주어진 ID는 페이지 당 한 번만 발생해야합니다.
  • 당신이 사용할 때마다 .outerHTML또는 .innerHTML, 당신은 영향을받는 노드에있는 모든 이벤트 핸들러 쓰레기. 이 방법을 사용하는 경우 그 사실을주의하십시오.

1
이 오류가 발생합니다. Uncaught TypeError : Object 3에 'addEventListener'메서드가 없습니다.
ECMAScript

그럼 당신은 잘못하고 있습니다. 해당 오류를 제공 한 전체 스크립트에 연결하고 실행되는 대상 페이지에 연결합니다.
Brock Adams

2
내가 사용한 수정 : btnreset.onclick = function () {resetEmotes (); }; 감사!
ECMAScript

작동하게되어 기쁘지만이 기술은 일부 조건에서만 작동하며 이식 할 수 없습니다.
Brock Adams

내 코드는 정말 잘못 코딩되었으므로 전체를 다시 코딩하고 jQuery를 사용하고 있습니다. 감사!
ECMAScript 2013 년

3

나는 오류를 (내가 뷰를 사용하고 있습니다) 수신하고 있었고, 난 내 전환 onclick="someFunction()"@click="someFunction"하고 지금은 노력하고 있습니다.


질문은 Vue와 관련이 없습니다
Dave Manuel

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.