• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Eventlistener in externer js-Datei

X

xzap

New member
Hallo,

ich möchte mein JavaScript komplett in externen Dateien verwalten. Im HTML-Code selber soll so wenig wie möglich stehen, also auch keine Eventlistener etc. Im HTML steht im Head lediglich:
HTML: 
<script type="text/javascript" src="../scripts/scripts.js"></script>

In scripts.js steht:

Code: 
function showBigPic(){
	big.style.visibility = "visible";
	frame.style.visibility = "visible";
}


var b1 = document.getElementById("b1");
var big = document.getElementById("big");
var frame = document.getElementById("image_view");
	
b1.addEventListener("click", showBigPic , false);

Bei Klick auf b1 soll die Funktion showBigPic ausgeführt werden. Das funktioniert leider nicht. Könnt ihr mir sagen, woran das liegt?

(Das ist gerade das erste mal, dass ich mit js arbeite, deshalb schoneinmal Sorry für die Frage, aber das frustriert mich jetzt schon ein paar Stunden)
 
xzap schrieb:
Könnt ihr mir sagen, woran das liegt?
Zum Vergrößern anklicken....
Ja...;)

Dein Problem steht in der Fehlerkonsole. Das Element mit der ID "b1" existiert zu dem Zeitpunkt, an dem das Skript ausgeführt wird, noch gar nicht, dass das DOM erst bist zu der <script>-Node aufgebaut wurde. Als Lösung kannst du entweder das <script> einfach an das Ende des <body>s packen (einfach direkt vor das </body>) oder mit einem passenden Event arbeiten. Es bieten sich dafür window.onload oder DOMContentLoaded an.
 
Ich danke dir, das Skript ans Ende des Bodys zu packen funktioniert. Wie genau würde ich das mit einem dieser Events umsetzen? Wenn ich im Head jetzt folgenden Code einfüge

Code: 
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
   
  });
</script>

, was müsste ich in die geschweifte Klammer schreiben? Die normale Einbindung
Code: 
<script type="text/javascript" src="../scripts/scripts.js"></script>
funktioniert dann ja nicht mehr, sondern ich müsste wahrscheinlich eine Funktion einbinden. Ich habe mein Skript wiefolgt angepasst und in dem Event oben die init()-Funktion aufgerufen:

Code: 
function init() {


var b1 = document.getElementById("b1");
var big = document.getElementById("big");
var frame = document.getElementById("image_view");
	
b1.addEventListener("click", showBigPic , false);
}

function showBigPic(){
	big.style.visibility = "visible";
	frame.style.visibility = "visible";
}

Das klappt auch nicht, in der Fehlerkonsole heißt es "document.getElementById(...) is null" und "init is not defined"
 
Du kannst die Registrierung von DOMContentLoaded auch in deine script.js stecken:
Code: 
document.addEventListener("DOMContentLoaded", function(){
	var b1 = document.getElementById("b1");
	var big = document.getElementById("big");
	var frame = document.getElementById("image_view");

	function showBigPic(){
		big.style.visibility = "visible";
		frame.style.visibility = "visible";
	}
	b1.addEventListener("click", showBigPic , false);

});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben