Javascript/ Eventlistener ohne click?

Habe ein einfaches HTML-Gerüst und im Body das Skript eingefügt. Wahrscheinlich ist die Lösung sehr leicht.^^

Beim dem Eventlistener habe ich ein Problem.
Wenn ich es anonym Einfüge, direkt in den Eventlistener, reagiert es beim klick wie geplant.

document.getElementById("btn1").addEventListener("click",
function(){
document.getElementById("div1").innerHTML='Hello JavaScript';
});



Wenn ich aber die Funktion ausserhalb habe, wird der Text schon beim laden der Seite überschrieben, rufe die Funktion aber nirgends auf, erstelle sie nur. Wieso??

document.getElementById("btn1").addEventListener("click",aendern());

function aendern(){
document.getElementById("div1").innerHTML='Hello JavaScript';
}


Das Grundgerüst

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1">Dieser Text soll bei Klick Aendern</div>
<button id="btn1">Aendere Text</button>

<script src="javascript.js"></script>
</body>
</html>
 
Der Grund ist, dass du in `document.getElementById("btn1").addEventListener("click",aendern());` die Funktion `aendern` ja schon direkt ausführst, dadurch, dass du es als Funktionsaufruf `aendern()` schreibst. Du musst das einfach ohne Klammern schreiben, weil du dem addEventListener(...) ja eine Funktion übergeben möchtest, und nicht das Ergebnis eines Funktionsaufrufes.
Schreib also einfach `document.getElementById("btn1").addEventListener("click", aendern);`
Dann wird es funktionieren.
 
Passende Stellenanzeigen aus deiner Region:

Oben