title: Uncaught ReferenceError: function is not defined with onclick
body: <p>I'm trying to make a <em>userscript</em> for a website to add custom emotes. However, I've been getting a lot of errors.</p>
  <p>Here is the function:</p>
  <pre><code>function saveEmotes() {
      removeLineBreaks();
      EmoteNameLines = EmoteName.value.split(&quot;\n&quot;);
      EmoteURLLines = EmoteURL.value.split(&quot;\n&quot;);
      EmoteUsageLines = EmoteUsage.value.split(&quot;\n&quot;);
  
      if (EmoteNameLines.length == EmoteURLLines.length &amp;&amp; EmoteURLLines.length == EmoteUsageLines.length) {
          for (i = 0; i &lt; EmoteURLLines.length; i++) {
              if (checkIMG(EmoteURLLines[i])) {
                  localStorage.setItem(&quot;nameEmotes&quot;, JSON.stringify(EmoteNameLines));
                  localStorage.setItem(&quot;urlEmotes&quot;, JSON.stringify(EmoteURLLines));
                  localStorage.setItem(&quot;usageEmotes&quot;, JSON.stringify(EmoteUsageLines));
                  if (i == 0) {
                      console.log(resetSlot());
                  }
                  emoteTab[2].innerHTML += '&lt;span style=&quot;cursor:pointer;&quot; onclick=&quot;appendEmote(\'' + EmoteUsageLines[i] + '\')&quot;&gt;&lt;img src=&quot;' + EmoteURLLines[i] + '&quot; /&gt;&lt;/span&gt;';
              } else {
                  alert(&quot;The maximum emote(&quot; + EmoteNameLines[i] + &quot;) size is (36x36)&quot;);
              }
          }
      } else {
          alert(&quot;You have an unbalanced amount of emote parameters.&quot;);
      }
  }
  </code></pre>
  <p>The <code>span</code> tag's <code>onclick</code> calls this function:</p>
  <pre><code>function appendEmote(em) {
      shoutdata.value += em;
  }
  </code></pre>
  <p>Every time I click a button that has an <code>onclick</code> attribute, I get this error:</p>
  <blockquote>
  <p>Uncaught ReferenceError: function is not defined.</p>
  </blockquote>
  <h1>Update</h1>
  <p>I tried using:</p>
  <pre><code>emoteTab[2].innerHTML += '&lt;span style=&quot;cursor:pointer;&quot; id=&quot;'+ EmoteNameLines[i] +'&quot;&gt;&lt;img src=&quot;' + EmoteURLLines[i] + '&quot; /&gt;&lt;/span&gt;';
  document.getElementById(EmoteNameLines[i]).addEventListener(&quot;click&quot;, appendEmote(EmoteUsageLines[i]), false);
  </code></pre>
  <p>But I got an <code>undefined</code> error.</p>
  <p>Here is the <a href="https://pastebin.com/RVSV9rR0" rel="noreferrer">script</a>.</p>
  <p>I tried doing this to test if listeners work and they don't for me:</p>
  <pre><code>emoteTab[2].innerHTML = '&lt;td class=&quot;trow1&quot; width=&quot;12%&quot; align=&quot;center&quot;&gt;&lt;a id=&quot;togglemenu&quot; style=&quot;cursor: pointer;&quot;&gt;Custom Icons&lt;/a&gt;&lt;/br&gt;&lt;a style=&quot;cursor: pointer;&quot; id=&quot;smilies&quot; onclick=\'window.open(&quot;misc.php?action=smilies&amp;amp;popup=true&amp;amp;editor=clickableEditor&quot;,&quot;Smilies&quot;,&quot;scrollbars=yes, menubar=no,width=460,height=360,toolbar=no&quot;);\' original-title=&quot;&quot;&gt;Smilies&lt;/a&gt;&lt;br&gt;&lt;a style=&quot;cursor: pointer;&quot; onclick=\'window.open(&quot;shoutbox.php&quot;,&quot;Shoutbox&quot;,&quot;scrollbars=yes, menubar=no,width=825,height=449,toolbar=no&quot;);\' original-title=&quot;&quot;&gt;Popup&lt;/a&gt;&lt;/td&gt;&lt;/br&gt;';
  document.getElementById(&quot;togglemenu&quot;).addEventListener(&quot;click&quot;, changedisplay,false);
  </code></pre>