addEventListener load - Funktion aufrufen

[ebody]

Hallo,

ich würde gerne ein Funktion aufrufen, die mit einem addEventListener geladen wird. Um zu zeigen was ich meine, habe ich hier ein kleines Script.

<p id="text"></p>
<a href="#" onClick="javascript:test()">Text einfügen</a>

window.addEventListener( 'load', function () {
  
  function test() {
					
    console.log('test()');
    document.getElementById('text').innerHTML = 'Hallo Welt!';
    
  }
  
});

Wenn man auf den Link "Text einfügen" klickt, erscheint die Meldung:

Uncaught ReferenceError: test is not defined

Wie bekommt man es hin, dass test() erkannt wird?

Gruß ebody

[JürgenB]

Hallo,

<p id="text"></p>
<a href="#" onClick="javascript:test()">Text einfügen</a>

so macht man das nicht. Das ist im Prinzip nicht falsch, ist aber in deinem Fall für den Fehler verantwortlich.

window.addEventListener( 'load', function () {
  
  function test() {
					
    console.log('test()');
    document.getElementById('text').innerHTML = 'Hallo Welt!';
    
  }
  
});

Die Funktion test ist eine lokale Funktion und nur innerhalb des Eventhandlers bekannt. Versuch es mal so:

<p id="text"></p>
<button type="button" id="insertbutton">Text einfügen</button>

Wenn man auf etwas drücken möchte, um eine Aktion auszuläsen, dann nimmt man einen Button. Links (<a>) sind zum Verlinken da.

window.addEventListener( 'DOMContentLoaded', function () {
  
  function test() {
					
    console.log('test()');
    document.getElementById('text').innerHTML = 'Hallo Welt!';
    
  }

  var insertbutton = document.getElementById('insertbutton ');
  insertbutton.addEventListener( 'click', test );
  
});

Innerhalb des Eventhandlers für DOMContentLoaded ist die Funktion test bekannt, und kann als Eventhandler für click verwendet werden. Ich habe noch load durch DOMContentLoaded ersetzt, da dieses Event etwas früher feuert und nicht auf das Laden von weiteren Ressourcen wie z.B. Bilder wartet.

Gruß
Jürgen