JavaScript Wie auf Variablen bei ausgelagerter JavaScript Datei zugreifen?

Tersus

Lieutenant
Dabei seit
Okt. 2011
Beiträge
981
Wenn ich in meinem HTML Dokument auf meine event.js verlinke, funktioniert sie nicht mehr.

In meiner HTML gibt es einen Button mit der id "button". Darauf greife ich in der js zu.

Code:
var myButton = document.getElementById("button"); // soweit alles gut
  myButton.onclick = function() { // geht nicht
  ...
};
Wenn ich den Code in die HTML Datei direkt einfüge, funktioniert alles.
 
Zuletzt bearbeitet: (Tippfehler behoben)

John Reese

Lt. Commander
Dabei seit
März 2008
Beiträge
1.208
Nein, das ist schon richtig so.

Wo bindest du das <script> Tag mit Referenz auf deine event.js ein, also an welcher Stelle?

Und wo bindest du das <script> Tag mit dem eingebetteten Code im HTML ein?

Denke, da ist der Unterschied, dass dein Button einfach an der Stelle noch nicht geladen wurde, an der du versuchst ihn über document.getElementById() zu "holen".
 

blablub1212

Commodore
Dabei seit
Sep. 2009
Beiträge
5.115
Ich denke du hast erstens einen verschreiber in deiner onclick-Funktion und ich denke auch, dass du das Script im Header einbindest. Zu diesem Zeitpunkt ist der Button aber noch nicht geladen.

So könntest du es wohl machen:

index.html:

Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CB</title>
  </head>
  <body>
    <button id="myButton">TEST</button>
    <script src="event.js" charset="utf-8"></script>
  </body>
</html>
event.js:

Code:
var myButton = document.getElementById('myButton');
myButton.onclick = function() {
    alert("Button clicked");
};
 

kling1

Commander
Dabei seit
Aug. 2008
Beiträge
2.330
etwas eleganter
Code:
document.querySelector('#button').addEventListener('click', function () {
    alert('yolo');
});
 

Tersus

Lieutenant
Ersteller dieses Themas
Dabei seit
Okt. 2011
Beiträge
981
Also einen Schreibfehler hatte ich nicht in meinen Quelltexten, lediglich beim Eingangsbeitrag habe ich mich vertippt.

Ich hatte die js im Header eingebunden, so wie in etlichen Tutorials empfohlen. Dass das Script im HTML Quelltext nach den entsprechenden Elementen (hier der Button) eingefügt werden muss, ist unfassbar mies. Ich will den JavaScript-Code doch in meinem gesamten HTML-Code nutzen können.
Und der Zugriff auf HTML-Elemente über JavaScript wird doch wohl der Standardfall sein. Wieso also empfehlen alle Tutorials, dass man die js im Header einbindet?

Ich hasse diese Web-Programmiersprachen. :freak:
 

blablub1212

Commodore
Dabei seit
Sep. 2009
Beiträge
5.115
Alles an JavaScript das die Seite rendert, bevor ein Nutzer den Content sieht (Modernizr.js, Respond.js ...) packst du in den Header. Alles andere was z.b. durch einen onclick ausgeführt wird, packst du ans Ende des Body. Alles was am Ende des Body steht wird natürlich auch erst geladen wenn der ganze Body geladen wurde, dass hat für den User den Vorteil, dass die Seite "gefühlt" schneller geladen ist.
 

cumulonimbus8

Admiral
Dabei seit
Apr. 2012
Beiträge
9.860

John Reese

Lt. Commander
Dabei seit
März 2008
Beiträge
1.208
@blablub1212:
Was aber nicht notwendig ist, wenn man das async-Attribut nutzt:
http://molily.de/javascript-asynchron/

Außerdem hat es den Nachteil, dass mehr HTTP-Requests anfallen, wenn man kein HTTP2 nutzt.
 

T0a5tbr0t

Lieutenant
Dabei seit
Apr. 2012
Beiträge
581
Und der Zugriff auf HTML-Elemente über JavaScript wird doch wohl der Standardfall sein. Wieso also empfehlen alle Tutorials, dass man die js im Header einbindet?
Wenn man als User eine Webseite anklickt will man als "Standardfall" den Content sehen. Die Browser lassen einen nicht warten, bis der komplette HTML und JS Code geladen wurde, damit etwas angezeigt wird. Bei großen Dokumenten und wäre DAS verdammt mies.
Im Internet werden alle Daten immer als Stream übertragen. Und HTML wird vom Browser auch als Stream verarbeitet.
Die Schnittstelle zur JS Welt ist nicht optimal, das hat aber historische Gründe und ändert sich langsam (z.B. durch async / defer).
 
Top