Variablen in und um Funktionen

LRK

Erfahrenes Mitglied
Grüß Gott.

Ich hatte mich etwas mit der Verwendung von Variablen in verschiedenen Bezugssystemen vertraut machen wollen und habe zum Testen ein Pen auf Codepen.io aufgemacht (hier eine Variante zum Ansehen und Umändern). Kurz darauf stieß ich auf ein Hindernis: Oben kann ich eine Variable vor, in und nach einer Funktion verwenden und manipulieren doch im unteren Bereich kriege ich als erstes eine "undefined"-Rückmeldung und nach der Funktion hat die Variable noch den Wert von vor der Funktion.

Ich sehe den Fehler nicht, könnte bitte jemand ein paar erklärende Worte sprechen? Danke.

Hier nochmal der Code zur Ansicht:
Javascript:
/*### Abschnitt 1 ################################################*/

test1 = 24;
var test2 = 48;

function funktion1() {
  document.write("<p style='color:red'>test1: " + test1 + "</p>");
  document.write("<p style='color:red'>test2: " + test2 + "</p>");
  test1 = test1 + 10;
}
funktion1();

document.write(test1 + "<br><br><hr><br>");

/*### Abschnitt 2 ################################################*/

var var1 = 1;
document.write("<p>'var1' wurde außerhalb einer Funktion initialisiert.</p>");
document.write("<table><tr><td width='120'><p>var1: " + var1 + "</p></td><td><p>var1 aufgerufen außerhalb einer Funktion</p></td></tr>");

function hi() {
  document.write("<tr><td><p style='color:yellow'>var1: " + var1 + "</p></td><td><p>var1 aufgerufen innerhalb einer Funktion</p></td></tr>");
  var1 = 4;
  document.write("<tr><td><p style='color:yellow'>var1: " + var1 + "</p></td><td><p>var1 aufgerufen in Funktion nach 'var1 = 4;'</p></td></tr>");
  var var1 = 3;
  var2 = "hallo";
  document.write("<tr><td><p style='color:yellow'>var1: " + var1 + "</p></td><td><p>var1 aufgerufen nach 'var var1 = 3;'</p></td></tr>")
}

hi();

document.write("<tr><td><p>var1: " + var1 + "</p></td><td><p>var1 aufgerufen nach Funktion</p></td></tr><tr><td><p>var2: " + var2 + "</p></td><td><p>var2 aufgerufen nach Funktion in welcher sie deklariert wurde</p></td></tr></table>");
 
hi probiere es mal so...
Javascript:
var var1 = 1;

var p = document.createElement('P');
var t = document.createTextNode('Ausserhalb Function: ' + var1);

p.appendChild(t);
document.body.appendChild(p);

function hi() {
  var op = document.createElement('P');
  t = document.createTextNode('in Funktion var1: ' + var1);
  op.appendChild(t);
  document.body.appendChild(op);

  var1 = 4;
  op = document.createElement('P');
  t = document.createTextNode('in Funktion var1 geaendert: ' + var1);
  op.appendChild(t);
  document.body.appendChild(op);
}

hi();

hier ein auschnitt zu document.write()...

The document.write (or writeln) allows to output a text directly into HTML. It deletes (reopens) the whole document if called after page loading.
beim reopen gehen dann auch die variables floeten...
document.write() wuerde ich nicht benutzen, auch wenn es erstmal kuerzer aussieht...
besser eien ordentliche html struktur und dann di tags mit getEement usw manipulieren...

komisch document.write() seh ich in letzter zeit sehr haeufig...
 
Zuletzt bearbeitet:
Hallo Hyper Lord,

danke für deine Einwände. Normalerweise würde ich tatsächlich nicht auf document.write() zurückgreifen aber ich hatte gehofft, ich könnte den Code so simpler halten und unanfälliger für Fehler machen. Hat leider nicht geklappt.

Ich werde versuchen mich mit deiner Schreibweise auseinanderzusetzen, diese erscheint doch schön aufgeräumt und effizient.
Nochmals danke.
 
ja ist eigentlich nicht meine schreibweise, ist der gaengige weg um auf dom elemente zu zugreifen bzw diese zu erstellen, das document.write() ist zwar vom code schreiben etwas kuerzer, aber ware spater auch beim fehlersuchen usw ziemlich nervig...
 
Hallo LRK,
wenn Du mal auf die Schnelle etwas demonstrieren möchtest, würde sich auch console.log anbieten.
Ich glaube, deine eigentliche Frage ist aber noch nicht beantwortet. Ich kenne auch die Antwort nicht, aber es würde mich interessieren.
 
Ich glaube, deine eigentliche Frage ist aber noch nicht beantwortet
It deletes (reopens) the whole document if called after page loading.

nochmal etwas genauer, bei document.write() wird nach dom load das document komplett neu geladen, bei jedem document.write(), somit ist var1 einmal undefined und kurz danach hat sie den anfangswert
Ich sehe den Fehler nicht, könnte bitte jemand ein paar erklärende Worte sprechen? Danke.
war die frage...

antwort: liegt am document.write() ;)
 
Zuletzt bearbeitet:
Ja, das Problem ist noch nicht gelöst, ich versuche mich gerade an einer Alternative.
Wie eingangs erwähnt habe ich auf codepen.io eine kleine Testumgebung angelegt wo man bequem in Echtzeit herum experimentieren und das Problem in Augenschein nehmen kann (und dies bitte auch tut).

Ein Klick genügt.

Gegen Hyper Lords These spricht, dass Variablen von vor dem Auftreten des "undefined" auch danach noch ihren Wert besitzen. Für eine Erklärung des vorliegenden Problems bin ich gerne offen.
 
Zuletzt bearbeitet:
also, wenn du meinen code einfuegst, funktioniert es komischerweise..., weil

ja muss ich wohl sagen, da habe ich falsch gedacht, du initialisierst eine neue var1 in deiner funktion var var1 = 3...,
machst du das var davor weg geht es auch...

var1 ist dann natuerlich noch nicht initialisiert, dann weist du var1 4 zu, glaube der globalen var1...
var1 hat zwar gleichen namen wie die globale, ist aber eine neue im functionsscope,
gleiche namensgebung ist daher schlecht, das ist mir beim ersten mal vor doc.write() nicht aufgefallen, habe gleich den fehler dort gesucht, nachgebaut und gedacht; ja so muss es sein ;)
mit undeklarierten variablen solltest du aber auch aufpassen, wenn du mal fremd js erweiterst oder so und ist ein use strict dann muss alles deklariert sein

ich bitte um entschuldigung, da war ich wohl mal voll auf dem holywego_O

bin eben doch nur ein gruenschnabel:D
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: LRK
Ah, allein durch die Anwesenheit der Zeile "var var1 = 3;" in der Funktion wird die Verwendung der vorher deklarierten globalen Variable "var1" ungültig, auch wenn die lokale "var1" zu diesem Zeitpunkt noch gar nicht deklariert wurde. Das hatte ich nicht erwartet. Nun gut, da dies nun geklärt ist, scheint der Rest so zu funktionieren wie es soll. Vielen Dank nochmal.
 
Zurück