[GELÖST] Probleme mit Eventlistener

[sascha83]

Hallo,

ich würde gerne einen EventListener für einen Schieberegler nutzen. Solange ich meine JS-Function direkt in HTML ausführe stellt das auch kein Problem dar. Wenn ich den Code allerdings in ein separates JS-File auslagere kommt auf der Konsole folgende Meldung:

'TypeError: document.getElementById(...) is null'

und mein Programm wird nicht weiter ausgeführt.

function myFunction() {
    alert('BLA');
}

document.getElementById('test').addEventListener('input', myFunction);

Muss zusätzlich noch etwas in den Code einfügen?

Vielen Dank für Eure Hilfe im Voraus.

VG

 

[mikdoe]

So wie du das zeigst wird das .getElementById() ja sofort ausgeführt. Das bedeutet, du darfs das externe JS erst laden, wenn das DOM vom Browser aufgebaut wurde. Also ganz unten und/oder in einem DOM-Ready-Zweig.

 

[sascha83]

ja, sowas hatte ich mir schon gedacht. hatte auch schon probiert das wie folgt zu lösen:

$(document).ready(function() {
 function myFunction() {
    alert('BLA');
}

document.getElementById('test').addEventListener('input', myFunction);
}});

Brachte mich aber nicht wirklich weiter. An welcher Stelle muss ich denn dann den Listener bzw. die Funktion aufrufen? Das will mir einfach nicht klar werden.

 

[mikdoe]

Mit deinen Klammern stimmt was nicht. Hast du in der Konsole geschaut, ob Fehler gemeldet werden?

 

[sascha83]

Ja stimmt, die eine Klammer wahr zu viel und eine Deklaration, die ich global ausgerührt hatte, musste in die Funktion umgelagert werden

 

[kkapsner]

Zeig' doch mal ein komplettes Minimalbeispiel oder einen Testlink.

 

[mikdoe]

Jau, genau das hätte ich jetzt auch vorgeschlagen. Am besten in einem Fiddle oder Quellcode hier in Code Tags bitte.

 

[kkapsner]

Geändert von sascha83 (Heute um 10:07 Uhr)

Ist das Problem jetzt gelöst?

 

[sascha83]

Ja, das Problem ist gelöst.

Zum einen lag es daran, dass das DOM noch nicht komplett aufgebaut war, zum anderen war die eine Klammer (}) zu viel. Durch das Verlegen der Funktion in

$(document).ready(function() {
//viel schöner Code
});

hat's dann funktioniert.

Vielen Dank für die Hilfe

 

[mikdoe]

Die DOM-Sache hatte ich doch schon in #2 gesagt. Gab's da Verständnisprobleme?

 

[sascha83]

Nein, keine Verständnisprobleme. Ich hatte mich nur noch etwas ausprobiert und dabei wieder andere Fehler eingebaut. Jetzt ist alles tipTop