Javascript/ Eventlistener ohne click?

E

eldok

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

httpdigest

Top Contributor
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.
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
J Mit Javascript eine Textdatei auslesen... HTML / CSS 28
S jqmath in javascript einbinden HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M Javascript: Farbkontrast überprüfen auf einer Webseite HTML / CSS 14
M Javascript: CSS Parsen um herauszufinden ob relativer Schriftgrößen verwendet werden HTML / CSS 23
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
S Sicherheitsaspekt JavaScript HTML / CSS 3
M Webservice per Javascript ansprechen HTML / CSS 5
G php in javascript einbinden HTML / CSS 13
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
J JavaScript Woerter erkenen HTML / CSS 4
C Eclipse und Javascript full autocomplete? HTML / CSS 1
A DragDrop mehrerer Shapes im SVG per Javascript? HTML / CSS 0
M Javascript Tastatureingabe HTML / CSS 2
B javascript ausgabe in Text HTML / CSS 2
E Javascript Status Abfrage HTML / CSS 7
J Javascript im DOM einer Webseite ändern HTML / CSS 1
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
P JavaScript var an bean Setter übergeben HTML / CSS 2
Z Erste Website CSS3 HTML5 Javascript Jquery - Kritik HTML / CSS 3
P RSS FEED/ JSON/ Filter By Date/ Handlebars / Javascript HTML / CSS 0
B Externes Suchfeld - Javascript. REST? HTML / CSS 0
S JavaScript und Ajax Erfahrene Gesucht!!!! HTML / CSS 0
V Javascript Adobe Acrobat XI Pro Formular Dropdown-Liste -> vorbelegte Checkboxen HTML / CSS 1
0 Javascript Leaflet Marker Popup mit Adresse HTML / CSS 1
C Sessions updaten ohne Seiten reload HTML / CSS 1
J Element ohne Klasse oder ID ansprechen HTML / CSS 2

Ähnliche Java Themen

Anzeige

Neue Themen


Oben