Javascript Variable ausgeben funktioniert nicht

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Javascript Variable ausgeben funktioniert nicht

    Hallo,

    ich wollte eine Website mit einem Countdown erstellen, also habe ich mal im Internet gesucht und das hier gefunden:

    Quellcode

    1. // Ziel-Datum in MEZ
    2. var jahr=2013, monat=10, tag=28, stunde=16, minute=00, sekunde=00;
    3. var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
    4. function countdown() {
    5. startDatum=new Date(); // Aktuelles Datum
    7. if(startDatum<zielDatum) {
    8. var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
    10. while(startDatum<zielDatum) {
    11. jahre++;
    12. startDatum.setFullYear(startDatum.getFullYear()+1);
    13. }
    14. startDatum.setFullYear(startDatum.getFullYear()-1);
    15. jahre--;
    17. while(startDatum<zielDatum) {
    18. monate++;
    19. startDatum.setMonth(startDatum.getMonth()+1);
    20. }
    21. startDatum.setMonth(startDatum.getMonth()-1);
    22. monate--;
    24. while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
    25. tage++;
    26. startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
    27. }
    29. stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
    30. startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
    32. minuten=Math.floor((zielDatum-startDatum)/(60*1000));
    33. startDatum.setTime(startDatum.getTime()+minuten*60*1000);
    35. sekunden=Math.floor((zielDatum-startDatum)/1000);
    37. (jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
    38. (monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
    39. (tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
    40. (stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
    41. (minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
    42. if(sekunden<10) sekunden="0"+sekunden;
    43. (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";
    44. document.countdownform.countdowninput.value=
    45. jahre+monate+tage+stunden+minuten+sekunden;
    46. setTimeout('countdown()',200);
    47. }
    49. else document.countdownform.countdowninput.value=
    50. "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
    51. }
    Alles anzeigen


    der HTML-Code:

    Quellcode

    1. <body onload="countdown()">
    2. <form name="countdownform">
    3. <p>
    4. <input size="75" name="countdowninput">
    5. </p>
    6. </form>
    7. </body>


    Das ganze funktioniert auch gut, aber der Countdown steht immer in einem Textfeld. Also hab ich einfach mal das noch dahinter gepackt:

    Quellcode

    1. <div id="anzeige"></div>


    und das noch in das Script:

    Quellcode

    1. document.getElementById("anzeige").innerHTML=
    2. jahre+monate+tage+stunden+minuten+sekunden;


    Das funktioniert auch gut, aber man sieht dann das Textfeld noch. Deswegen hab ich die Zeile gelöscht, aber dann sieht man auch nicht mehr das was ich selbst dazugeschrieben habe, sondern nur noch eine leere Seite.

    Ich hoffe das ihr mir hier helfen könnt, da ich schon zwei Stunden gesucht habe und immernoch nicht weiter weiß.

    MfG
    |ravecow|

  • Komplette HTML Datei:

    Quellcode

    1. <html>
    2. <head>
    3. <title>Datum-Countdown mit JavaScript</title>
    4. <style type="text/css">
    5. body { background-color: rgb(0,0,0) }
    6. </style>
    7. <script type="text/javascript">
    8. var jahr=2013, monat=10, tag=28, stunde=16, minute=00, sekunde=00;
    9. var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
    10. function countdown() {
    11. startDatum=new Date();
    13. if(startDatum<zielDatum) {
    14. var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
    16. while(startDatum<zielDatum) {
    17. jahre++;
    18. startDatum.setFullYear(startDatum.getFullYear()+1);
    19. }
    20. startDatum.setFullYear(startDatum.getFullYear()-1);
    21. jahre--;
    22. while(startDatum<zielDatum) {
    23. monate++;
    24. startDatum.setMonth(startDatum.getMonth()+1);
    25. }
    26. startDatum.setMonth(startDatum.getMonth()-1);
    27. monate--;
    29. while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
    30. tage++;
    31. startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
    32. }
    34. stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
    35. startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
    36. minuten=Math.floor((zielDatum-startDatum)/(60*1000));
    37. startDatum.setTime(startDatum.getTime()+minuten*60*1000);
    38. sekunden=Math.floor((zielDatum-startDatum)/1000);
    40. (jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
    41. (monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
    42. (tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
    43. (stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
    44. (minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
    45. if(sekunden<10) sekunden="0"+sekunden;
    46. (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";
    47. document.countdownform.countdowninput.value=
    48. jahre+monate+tage+stunden+minuten+sekunden;
    49. setTimeout('countdown()',200);
    50. document.getElementById("anzeige").innerHTML=
    51. jahre+monate+tage+stunden+minuten+sekunden;
    52. }
    54. else document.countdownform.countdowninput.value=
    55. "0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
    56. }
    57. </script>
    58. </head>
    59. <body onload="countdown()">
    60. <form name="countdownform">
    61. <div id="anzeige"></div>
    62. </form>
    63. </body>
    64. </html>
    Alles anzeigen

  • Quellcode

    1. document.countdownform.countdowninput.value=jahre+monate+tage+stunden+minuten+sekunden;


    1. Kommentiere diese Zeile aus. Dieses Element existiert doch jetzt nicht mehr. Jetzt wird der Text auch wieder ausgegeben
    2. Schwarze Schrift auf Schwarzen Hintergrund ist auch nicht so dolle :)
    Lerne nicht Programmiersprachen, lerne Programmieren...

    :D Alles andere ist Syntax :D

    [Blockierte Grafik: http://www.xing.com/img/buttons/10_en_btn.gif]