JürgenB: addEventListener load - Funktion aufrufen

Beitrag lesen

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