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>
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>
