JavaScript Wie auf Variablen bei ausgelagerter JavaScript Datei zugreifen?

Tersus · 23. Juli 2016

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.

Hooo · 23. Juli 2016

verschrieben? myButton.onclick

John Reese · 23. Juli 2016

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 · 23. Juli 2016

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 · 23. Juli 2016

etwas eleganter

Code:

document.querySelector('#button').addEventListener('click', function () {
    alert('yolo');
});

Tersus · 23. Juli 2016

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.

John Reese · 23. Juli 2016

Dafür gibt es dann sowas: http://molily.de/js/event-handling-onload.html

blablub1212 · 23. Juli 2016

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 · 23. Juli 2016

Dass das Script im HTML Quelltext nach den entsprechenden Elementen (hier der Button) eingefügt werden muss, ist unfassbar mies.

Wenns dich tröstet: ich hatte heute den selben Unfall bis die Erleuchtung der Reihenfolge kam.
Also bleib dran!

CN8

John Reese · 23. Juli 2016

@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 · 23. Juli 2016

Tersus schrieb:
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).

Suche

JavaScript Wie auf Variablen bei ausgelagerter JavaScript Datei zugreifen?

Tersus

Gast

Hooo

Ensign

John Reese

Lt. Commander

blablub1212

Rear Admiral

kling1

Gast

Tersus

Gast

John Reese

Lt. Commander

blablub1212

Rear Admiral

cumulonimbus8

Fleet Admiral

John Reese

Lt. Commander

T0a5tbr0t

Lieutenant

Ähnliche Themen