Uncaught Referenceerror: Function Is Not Defined with Onclick

Uncaught ReferenceError: function is not defined with onclick

Never use .onclick(), or similar attributes from a userscript! (It's also poor practice in a regular web page).

The reason is that userscripts operate in a sandbox ("isolated world"), and onclick operates in the target-page scope and cannot see any functions your script creates.

Always use addEventListener()^Doc (or an equivalent library function, like jQuery .on()).

So instead of code like:

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

You would use:

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

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

---

For the loop, you can't pass data to an event listener like that See the doc. Plus every time you change innerHTML like that, you destroy the previous event listeners!

Without refactoring your code much, you can pass data with data attributes. So use code like this:

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

Where appendEmote is like:

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;
}

WARNINGS:

• Your code reuses the same id for several elements. Don't do this, it's invalid. A given ID should occur only once per page.
• Every time you use .outerHTML or .innerHTML, you trash any event handlers on the affected nodes. If you use this method beware of that fact.

Uncaught ReferenceError when trying to call a onclick Function

Okay so after a trying almost everything, I finally found the problem. The trick was to simply delete my Cache and reload the project. I guess, that the JavaScript was just loaded from my Cache and therefore did not update, when I changed it.

Uncaught ReferenceError: function is not defined at HTMLSpanElement.onclick

I didn't replace all the $ with jQuery. Once I did that, everything worked.

Uncaught ReferenceError: function is not defined at HTMLInputElement.onclick

Your error is because you have defined your function inside:

<script type="text/javascript" src="lib.js">

the correct way is to close that script tag first like so:

<script type="text/javascript" src="lib.js"></script>

and then defining the script tag again to define the function like so:

<script>
function(){
    //body of function
};
</script>

<script type="text/javascript" src="lib.js"></script>

<script>

  function decryptfun() {

    var pass = "hjubjbjhdgyuwj";

    var encrtoken = "abcdefghijklmn";

    //var p = lib.decrypt(encrtoken, atob(pass)); //USE THIS IN YOUR CASE

    var p = "test"; //just for example

    alert(p);

  }

</script>

<h1>Decrypt Operation</h1>

<input type="button" onclick="decryptfun()" value="Click">

---

Related Topics