PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : JavaScript / jQuery - Variable bei externem Skript

Osmoses
2014-05-31, 00:41:26
Hallo!

Folgender Code


var v=document.getElementById("kennung");
function doSth()

{
v.innerHTML="Teeeeeext";
}


macht nichts in einer externen Datei.
Im HTML funktioniert er aber recht fein.

Verwende ich dagegen den Code


$(document).ready(varia);
function varia()
{
v=document.getElementById("kennung");
}
function doSth()

{
v.innerHTML="Teeeeeext";
}


und mache eine extra Funktion, welche eine globale Variable v definiert nachdem ready, geht es.
Dies finde ich aber unschön - gibt es eine besser Alternative?

HTML ist übrigens


<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="geo.js" type="text/javascript"></script>
</head>
<body>
<p id="kennung">Hm...</p>
<button onclick="doSth()">mach was</button>
</body>
</html>
Marscel
2014-05-31, 00:59:11
Wenn du geo.js hinter kennung packst, dann wird das gehen. Vorher existiert es ja gar nicht. Oder eben mittels ready.

Wenn du schon jQuery nutzt, dann kannst du doSth doch einfach so bauen:

function doSth() {
$("#kennung").html("Text");
}

Dann brauchst du all diesen Kram gar nicht erst berücksichtigen.
Osmoses
2014-05-31, 14:04:01
Wenn du geo.js hinter kennung packst, dann wird das gehen. Vorher existiert es ja gar nicht. Oder eben mittels ready.

Wenn du schon jQuery nutzt, dann kannst du doSth doch einfach so bauen:

function doSth() {
$("#kennung").html("Text");
}

Dann brauchst du all diesen Kram gar nicht erst berücksichtigen.

Aber wieso geht es dann, wenn ich statt


var v=document.getElementById("kennung");
function doSth()

{
v.innerHTML="Teeeeeext";
}


dies


function doSth()
{
document.getElementById("kennung").innerHTML="Teeeeeext";
}


verwende?
:confused:

"document.getElementById("kennung")" in eine Variable auszulagern soll ja den Code schlanker und wartbarer machen.
RattuS
2014-05-31, 14:34:20
Stichwort Variable Scope. Wenn du eine Variable in allen Funktionen zur Verfügung haben möchtest (global), musst du sie außerhalb einer Funktion deklarieren (!= definieren).

Beispiel: http://jsfiddle.net/9yGFF/
Marscel
2014-05-31, 15:43:05
Aber wieso geht es dann, wenn ich statt


var v=document.getElementById("kennung");
function doSth()

{
v.innerHTML="Teeeeeext";
}


dies


function doSth()
{
document.getElementById("kennung").innerHTML="Teeeeeext";
}


verwende?
:confused:

"document.getElementById("kennung")" in eine Variable auszulagern soll ja den Code schlanker und wartbarer machen.


Ganz einfach: document.getElementById("kennung") vor dem Anlegen von kennung wird fehlschlagen, weil es einfach noch nicht existiert. v wird also undefined gesetzt und in der Funktion auch genau das sein.

Wenn du es später machst, also erst in doSth, mit dem Klick auf dem Button, dann wird kennung ja schon im Dokument erstellt sein, und deswegen kriegst du hier auch ein DOM-Element.
Osmoses
2014-05-31, 20:00:07
Einmal herzlichen Dank an alle, welche die Geduld mit mir aufbringen - bin Web-Programmierung einfach nicht gewohnt (merkt man ja).
:wink:
Wobei lustigerweise mein Standardprogramm (ein Prim-Rechner) problemlos per Website funktioniert, ich diesen Blödsinn aber nicht überhirne:freak:

Ganz einfach: document.getElementById("kennung") vor dem Anlegen von kennung wird fehlschlagen, weil es einfach noch nicht existiert. v wird also undefined gesetzt und in der Funktion auch genau das sein.

Wenn du es später machst, also erst in doSth, mit dem Klick auf dem Button, dann wird kennung ja schon im Dokument erstellt sein, und deswegen kriegst du hier auch ein DOM-Element.

Verstanden, aber wieso geht dann



function doSth()
{
v=document.getElementById("kennung");
v.innerHTML="Teeeeeext";
}


nicht?
Das geht mir nicht ein.
:frown:

EDIT:
Juhuuuuu!
Ich hab es kapiert und verstehe jetzt meinen Fehler!
Danke euch allen :)
z3ck3
2014-06-01, 19:27:13
nur so ne Idee ^^ (ungetestet)

Wenn das Javascript ausgeführt wird bevor die Elemente der Seite zur Verfügung stehen, dann funktioniert das ganze halt nicht. Darum kann man sowas am besten direkt dem ready Event anhängen. Umfangreicherer Code sollte aber natürlich möglichst in ein eigenes Plugin, in dem Readyevent führt man dann nur noch die initialisierenden Funktionen aus.

btw. wenn man schon jQuery läd, dann sollte man das auch ruhig benutzen ;)



$(document).ready(function() {

/**
* DoSh Click Event
*/
$("#dosh").click(function(event) {
event.preventDefault();
$("#kennung").html("Teeeeeext");
}).removeAttr("disabled");

});




<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="geo.js" type="text/javascript"></script>
</head>
<body>
<p id="kennung">Hm...</p>
<button id="dosh" disabled>mach was</button>
</body>
</html>