✔ Variable in Countdown undefined

alve89 · 13. Januar 2013

Hallo zusammen!

Ich habe hier ein kleines Script, das mir die Zeit bis zu einem bestimmten Datum runterzählen lässt. Die Funktion selbst klappt auch, nur leider habe ich ein Anzeigeproblem.
Ich kann mir die Zeit zwar in einer Form anzeigen lassen (das klappt hervorragend), nicht jedoch als normalen Site-Inhalt. Das versuche ich momentan mit einem Button-Event. Nur leider kommt die Ausgabe "undefined". Ich würde gerne die Variable "tage" (und andere, aber das kann ich ja dann wieder selbst) als normalen Site-Inhalt anzeigen und komme nicht weiter.

Kann mir da bitte jemand helfen? :-(

Vielen Dank im Voraus!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />	
<meta property="og:image" content="/favicon.ico"/>
<title>Links zu Umfragen</title>
<script language="JavaScript">
      // Ziel-Datum in MEZ
      var jahr=2013, monat=01, tag=24, stunde=00, minute=00, sekunde=01;
      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;

          // Jahre
          while(startDatum<zielDatum) {
            jahre++;
            startDatum.setFullYear(startDatum.getFullYear()+1);
          }
          startDatum.setFullYear(startDatum.getFullYear()-1);
          jahre--;

          // Monate
          while(startDatum<zielDatum) {
            monate++;
            startDatum.setMonth(startDatum.getMonth()+1);
          }
          startDatum.setMonth(startDatum.getMonth()-1);
          monate--;

          // 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);

          // Anzeige formatieren
          //(jahre!=1)?jahre=jahre+" Jahre,  ":jahre=jahre+" Jahr,  ";
          //(monate!=1)?monate=monate+" Monate,  ":monate=monate+" Monat,  ";
          (tage!=1)?tage=tage+" Tage,  ":tage=tage+" Tag,  ";
          (stunden!=1)?stunden=stunden+" Stunden,  ":stunden=stunden+" Stunde,  ";
          (minuten!=1)?minuten=minuten+" Minuten":minuten=minuten+" Minute  und  ";
          if(sekunden<10) sekunden="0"+sekunden;
          (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

          document.countdownform.countdowninput.value=
              //jahre+monate+
              tage+stunden+minuten;
              //+ ","+sekunden;

          setTimeout('countdown()',200);
        }
        // Anderenfalls alles auf Null setzen
        else document.countdownform.countdowninput.value=
            "0 Jahre, 0 Monate, 0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
      }
      var x = tage;
function myFunction()
{
document.getElementById("testdiv").innerHTML= x;
}
</script>
</head>

<body onload="countdown()">
<div style="
 position:absolute;
 height:200px; 
 width:500px;
 margin:-150px 0px 0px -250px;
 top: 50%; 
 left: 50%;
 background-color: #f5f5f5;
 border: 1px dotted #000000;
 padding: 10px">


<p id="testdiv">Hier steht Text</p>

<button type="button" onclick="myFunction()">Ändern</button>
<form name="countdownform">
	<input name="countdowninput" style="width:200px" readonly>
</form>
</div>
</body>
</html>

erik s. · 14. Januar 2013

Dein Problem besteht darin, dass du die lokal definierte Variable tage außerhalb ihres Gültigkeitsbereiches auslesen willst. Sie ist nur innerhalb der Funktion countdown() verfügbar. Du hast verschiedene Möglichkeiten, dass zu lösen. Eine davon wäre, die Variable x global zu definieren (was ja bereits der Fall ist) und am Ende (aber in) der Funktion countdown() der globalen x den Wert von tage zuzuordnen.

Javascript:

// Ziel-Datum in MEZ
var jahr=2013, monat=01, tag=24, stunde=00, minute=00, sekunde=01;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
var x;  // global definiert

function countdown() {
  // lokale Variablen
  var startDatum=new Date(); // Aktuelles Datum
  var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
  
  /*
   * ... deine Berechnungen ...
   */

  x = tage;
}

function myFunction()
{
  document.getElementById("testdiv").innerHTML= x;
}

Noch was anderes: Versuche, die Einrückungstiefe in deinem Code konstant zu halten, damit man ihn auch mal sauber überfliegen kann.

alve89 · 14. Januar 2013

So einfach ist es, danke! Jetzt habe ich nur noch ein kleines Problem, das ich aber absolut nicht verstehe. Ich würde das Script gern beim Laden eines Spans öffnen (da passiert aber gar nichts). Mit onclick geht es also, mit onload nicht. Warum nicht? Bzw. wie kann ich das bewerkstelligen? Normalerweise sollte onload hier doch auch greifen, oder?

HTML:

<body onload="countdown()">
    <div style="
        position:absolute;
         height:200px; 
         width:500px;
         margin:-150px 0px 0px -250px;
         top: 50%; 
         left: 50%;
         background-color: #f5f5f5;
         border: 1px dotted #000000;
         padding: 10px">

            <span style="border:solid black; height:10px; width:250px" id="testdiv" onclick="myFunction()"></span>

    </div>
</body>

Hab's doch geschafft:

Code:

//Das hier ans Ende der countdown()-Funktion setzen:
          x = tage+stunden+ minuten;
          document.getElementById("testdiv").innerHTML= x;
}
</script>
</head>
<body onload="countdown()">
<div style="
 position:absolute;
 height:200px; 
 width:500px;
 margin:-150px 0px 0px -250px;
 top: 50%; 
 left: 50%;
 background-color: #f5f5f5;
 border: 1px dotted #000000;
 padding: 10px">


    <span style="border:solid black; height:10px; width:250px" id="testdiv"></span>


</div>
</body>
</html>

✔ Variable in Countdown undefined

alve89

Grünschnabel

erik s.

Erfahrenes Mitglied

alve89

Grünschnabel

Neue Beiträge