addEventListener load - Funktion aufrufen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self addEventListener load - Funktion aufrufen Fri, 14 Feb 20 13:19:03 Z https://forum.selfhtml.org/self/2020/feb/14/addeventlistener-load-funktion-aufrufen/1765191#m1765191 https://forum.selfhtml.org/self/2020/feb/14/addeventlistener-load-funktion-aufrufen/1765191#m1765191 <p>Hallo,</p> <p>ich würde gerne ein Funktion aufrufen, die mit einem addEventListener geladen wird. Um zu zeigen was ich meine, <a href="https://codepen.io/ebody/pen/wvaMxJO?editors=1010" rel="noopener noreferrer">habe ich hier ein kleines Script</a>.</p> <pre><code class="block"><p id="text"></p> <a href="#" onClick="javascript:test()">Text einfügen</a> </code></pre> <pre><code class="block">window.addEventListener( 'load', function () { function test() { console.log('test()'); document.getElementById('text').innerHTML = 'Hallo Welt!'; } }); </code></pre> <p>Wenn man auf den Link "Text einfügen" klickt, erscheint die Meldung:</p> <blockquote> <p>Uncaught ReferenceError: test is not defined</p> </blockquote> <p>Wie bekommt man es hin, dass test() erkannt wird?</p> <p>Gruß ebody</p> addEventListener load - Funktion aufrufen Fri, 14 Feb 20 13:33:10 Z https://forum.selfhtml.org/self/2020/feb/14/addeventlistener-load-funktion-aufrufen/1765192#m1765192 https://forum.selfhtml.org/self/2020/feb/14/addeventlistener-load-funktion-aufrufen/1765192#m1765192 <p>Hallo,</p> <blockquote> <pre><code class="block"><p id="text"></p> <a href="#" onClick="javascript:test()">Text einfügen</a> </code></pre> </blockquote> <p>so macht man das nicht. Das ist im Prinzip nicht falsch, ist aber in deinem Fall für den Fehler verantwortlich.</p> <blockquote> <pre><code class="block">window.addEventListener( 'load', function () { function test() { console.log('test()'); document.getElementById('text').innerHTML = 'Hallo Welt!'; } }); </code></pre> </blockquote> <p>Die Funktion <code>test</code> ist eine lokale Funktion und nur innerhalb des Eventhandlers bekannt. Versuch es mal so:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>insertbutton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text einfügen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Wenn man auf etwas drücken möchte, um eine Aktion auszuläsen, dann nimmt man einen Button. Links (<a>) sind zum Verlinken da.</p> <pre><code class="block language-javascript">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'test()'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Hallo Welt!'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> insertbutton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'insertbutton '</span><span class="token punctuation">)</span><span class="token punctuation">;</span> insertbutton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">'click'</span><span class="token punctuation">,</span> test <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Innerhalb des Eventhandlers für <code>DOMContentLoaded</code> ist die Funktion <code>test</code> bekannt, und kann als Eventhandler für <code>click</code> verwendet werden. Ich habe noch <code>load</code> durch <code>DOMContentLoaded</code> ersetzt, da dieses Event etwas früher feuert und nicht auf das Laden von weiteren Ressourcen wie z.B. Bilder wartet.</p> <p>Gruß<br> Jürgen</p>