Problem mit globalen Variablen in einer Funktion

[Felix94]

Hallo.

Ich habe heute endlich den Countdown für die Internetseite einer Radio Ag in Angriff genommen.
Ich wollte einen grafischen Countdown basteln und habe auch alle Grafiken in Photoshop entworfen, aber nun habe ich ein Problem.
Die Berechnung der Zeit klappt super, doch dann möchte ich die Zahlen halt als bild ausgeben, dort habe ich die bilder mit 0.png, 1.png usw. abgespeichert.

So siehts im Moment aus:
ganz am Anfang habe ich die globalen Variablen deklariert:
                var tage1 = 0;
var tage2;
var stunden1;
var stunden2;
var minuten1;
var minuten2;
var sekunden1;
var sekunden2;

dann beginnt die Funktion Countdown, dort wird dann der Wert berechnet das klappt auch alles prima.
Dann zerlege ich die zweistelligen Zahlen (Tage, Stunden, Minuten, Sekunden) und speicher diese in der Funktion in der globalen Variable kann das klappen?
var tage1 = tage.charAt(0)+ ".png";
var tage2=tage.charAt(1)+ ".png";
var stunden1=stunden.charAt(0)+ ".png";
var stunden2=stunden.charAt(1)+ ".png";
var minuten1=minuten.charAt(0)+ ".png";
var minuten2=minuten.charAt(1)+ ".png";
var sekunden1=sekunden.charAt(0)+ ".png";
var sekunden2=sekunden.charAt(1)+ ".png";

wenn ich hier den Befehl var vorne weg weglassse ändert das komischerweise auch nichts.

in jeder Variable ist jetzt für mein Verständnis das geeignete Bild eingespeichert.
Dann habe ich einen neuen Skriptblock in dem passenden div Container aufgemacht und in dem will ich nun die Bilder ausgeben.
Mein Versuch war :

document.write("<img src='" + tage1 + "'>")
doch dieser klappt leider nicht habt ihr eventuell eine Idee?

Vielen Dank schonmal

Felix 94

PS: Bin noch ein Anfänger deswegen ist das manchmal sehr ausführlich geschrieben.

[Felix Riesterer]

Lieber Felix94,

ganz am Anfang habe ich die globalen Variablen deklariert:
                var tage1 = 0;
var tage2;
var stunden1;
var stunden2;
var minuten1;
var minuten2;
var sekunden1;
var sekunden2;

das ist nicht gut - warum komme ich nachher noch drauf.

Wenn Du so im globalen Kontext Variablennamen definierst, dann kannst Du auch gleich window.tage1=0 notieren - das kommt auf dasselbe raus, da globale Variablen automatisch neue Eigenschaften des window-Objektes werden. Insofern ändert da deshalb das Weglassen des Schlüsselwortes "var" nichts, denn die sowieso globalen Variablennamen bleiben global.

Etwas anderes wäre das alles gewesen, wenn Du innerhalb einer Funktion diese Variablen notiert hättest. Dann wären die Variablen mit dem Schlüsselwort innerhalb der Funktion als lokale Variablen angelegt worden. Ohne var würden sie auch innerhalb der Funktion als globale Variablen definiert.

dann beginnt die Funktion Countdown, dort wird dann der Wert berechnet

Wie diese Funktion aussieht, und was da sonst noch so alles in Deinem Script passiert, hast Du nirgends aufgelistet. Daher kann ich Dir nur ungefähr raten: Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts. Insbesondere wäre der Abschnitt mit dem objektorientierten Ansatz wertvoll, da er Dein Problem lösen könnte.

Liebe Grüße,

Felix Riesterer.

[Felix94]

Lieber Felix94,

das ist nicht gut - warum komme ich nachher noch drauf.

Wenn Du so im globalen Kontext Variablennamen definierst, dann kannst Du auch gleich window.tage1=0 notieren - das kommt auf dasselbe raus, da globale Variablen automatisch neue Eigenschaften des window-Objektes werden. Insofern ändert da deshalb das Weglassen des Schlüsselwortes "var" nichts, denn die sowieso globalen Variablennamen bleiben global.

Aber warum kann ich dann nicht im nachhinein auf die variable tage1 zugreifen, die dann immer noch null anzeigt anstatt eine 2 die Variablen in der Funktion kann ich nicht ansprechen das ist mein Problem weil am Ende der Funktion kommen die richtigen Zahlen raus das hatte ich bereits getestet.

Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts. Insbesondere wäre der Abschnitt mit dem objektorientierten Ansatz wertvoll, da er Dein Problem lösen könnte.

Vielen Dank die 2 Artikel werde ich mir morgen mit Sicherheit durchlesen.

Liebe Grüße,

Felix Riesterer.

Dankeschön für die schnelle Antwort.

[Don P]

Hallo,

Aber warum kann ich dann nicht im nachhinein auf die variable tage1 zugreifen, die dann immer noch null anzeigt anstatt eine 2 die Variablen in der Funktion kann ich nicht ansprechen das ist mein Problem weil am Ende der Funktion kommen die richtigen Zahlen raus das hatte ich bereits getestet.

Da kann nur raten, denn eine Funktion steht ja nirgends Sätze ohne Punkt und Komma kann man schwer oder gar nicht verstehen null dürfte nicht in der Variablen stehen nach var tage1 ist die variable undefined nicht null so kann man null helfen.

Gruß, Don P

[Felix Riesterer]

Lieber Don,

Da kann nur raten, denn eine Funktion steht ja nirgends Sätze ohne Punkt und Komma kann man schwer oder gar nicht verstehen null dürfte nicht in der Variablen stehen nach var tage1 ist die variable undefined nicht null so kann man null helfen.

YMMD!

Liebe Grüße,

Felix Riesterer.

[EKKi]

Mahlzeit Felix94,

Aber warum kann ich dann nicht im nachhinein auf die variable tage1 zugreifen, die dann immer noch null anzeigt anstatt eine 2

Bist Du *sicher*, dass das auch "im Nachhinein" ist? Bist Du Dir darüber im Klaren, *wann* *welcher* (Javascript-)Code ausgeführt wird?

MfG,
EKKi

[Struppi]

Erstmal, kennst du die Fehlerkonsole? Wenn nicht mach dich damit vertraut.

Mein Versuch war :

document.write("<img src='" + tage1 + "'>")
doch dieser klappt leider nicht habt ihr eventuell eine Idee?

document.write() ist hier nicht geeignet, damit überschreibst du das Dokument und der komplette Inhalt ist weg inkl. JS.

Jetzt kurz zu sagen wie du es machen sollst ist schwierig, normalerweise wäre der Weg über innerHTML der schnellste. Da du aber nur Bilder austauschen willst, geht das einfacher über das Image Objekt.

Struppi.

[Felix94]

Ich schreibe nochmal kurz und bedanke mich für die ganzen Antworten.
ich bin nochmal einen schritt zurück gegangen und habe die bilder komplett rausgelassen. Ich poste jetzt hier mal den gesamten Countdown ich denke das ist praktischer.

// Ziel-Datum in MEZ
      var jahr=2010, monat=3, tag=14, stunde=20, minute=30, sekunde=00;
      var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

function countdown() {

startDatum=new Date(); // Aktuelles Datum

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
        if(startDatum<zielDatum)  {

var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

// Tage
          while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
            tage++;
            startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
          }

// Stunden
          stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
          startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

// Minuten
          minuten=Math.floor((zielDatum-startDatum)/(60*1000));
          startDatum.setTime(startDatum.getTime()+minuten*60*1000);

// Sekunden
         sekunden=Math.floor((zielDatum-startDatum)/1000);

	  //zweistellig Datum  
	  if(tage<10) {  
		  tage= "0"+tage;  
	  }  
	  if(stunden<10) {  
		  stunden= "0"+stunden;  
	  }		  
	  if(minuten<10) {  
		  minuten= "0"+minuten;  
	  }		  
	  if(sekunden<10) {  
		  sekunden= "0"+sekunden;  
	  }  
	    tage1 = tage.charAt(0);  
	    tage2=tage.charAt(1);  
	    stunden1=stunden.charAt(0);  
	    stunden2=stunden.charAt(1);  
	    minuten1=minuten.charAt(0);  
	    minuten2=minuten.charAt(1);  
	    sekunden1=sekunden.charAt(0);  
	    sekunden2=sekunden.charAt(1);  

document.counter.counterinput.value= " " + tage+ " "+stunden+ " "+minuten+ " " +sekunden;

	  setTimeout('countdown()',200);  

}
  }

//-->
</script>

<title>Frings on Air Webseite</title>

</head>

<body onload="countdown()">
<div id="wrapper">
<div id="head">
<div id="logo">
<img src="logohp.jpg" alt="Logo von Frings on Air" width="284" height="139"  />
</div>
<div id="countdown">
<form name="counter"
<input name="counterinput" type="text">
</form>

So das wäre er nun wäre es möglich wenn ich mit HTML 8 nicht existierende Bilder reinstelle und diese dann mit
document.images[name].src= Variable;
ändere?

[Struppi]

Ich schreibe nochmal kurz und bedanke mich für die ganzen Antworten.

Du hast meine Frage nicht beantwortet. Warum?

Struppi.