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.

Make sure you are using Javascript module or not?! if using js6 modules your html events attributes won't work. in that case you must bring your function from global scope to module scope. Just add this to your javascript file: window.functionName= functionName;

example:

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

I think you put the function in the $(document).ready....... The functions are always provided out the $(document).ready.......

I got this resolved in angular with (click) = "someFuncionName()" in the .html file for the specific component.

Check the casing of your functions.

onclick="sillyLongFunctionName" 

and

function sillylongFunctionName() { ...

Are not identical. Hard to spot sometimes!

for me I've just put the function out of pageReady scope and it works jQuery(document).ready(function(){ don't the function here }

put your function here with script tag

I got this resolved by solving the bugs in the Javascript, it could be the js file cannot be loaded, causing the function not able to be reached

If the function is not defined when using that function in html, such as onclick = ‘function () ', it means function is in a callback, in my case is 'DOMContentLoaded'.

See that your function is not in a callback function if you are using an external js file. Removing the callback function would do the trick

(function() { //comment this out
//your code
})(); //comment this out

• javascript
• onclick
• userscripts