[Javascript] Hulp bij juist aanroepen js-functie - Softwareontwikkeling

vrijdag 2 september 2005 23:58

Acties:

Topicstarter

Na een paar uur klooien met tutorials, online javascript gidsen, helpfiles geef ik het op en vraag het gewoon.

Ik heb een countdown scriptje, alleen kan ik het niet gebruiken. (lees: ik snap niet wat ik fout doe)

klokbestand.js

code:

function countdown_clock(year, month, day, hour, minute, format)
         {
         //I chose a div as the container for the timer, but
         //it can be an input tag inside a form, or anything
         //who's displayed content can be changed through
         //client-side scripting.
         html_code = '<div id="countdown"></div>';
         
         document.write(html_code);
         
         countdown(year, month, day, hour, minute, format);                
         }
         
function countdown(year, month, day, hour, minute, format)
         {
         Today = new Date();
         Todays_Year = Today.getYear() - 2000;
         Todays_Month = Today.getMonth() + 1;                  
         
         //Convert both today's date and the target date into miliseconds.                           
         Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(), 
                                 Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();                                 
         Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime();                  
         
         //Find their difference, and convert that into seconds.                  
         Time_Left = Math.round((Target_Date - Todays_Date) / 1000);
         
         if(Time_Left < 0)
            Time_Left = 0;
         
         switch(format)
               {
               case 0:
                    //The simplest way to display the time left.
                    document.getElementById('countdown').innerHTML = Time_Left + ' seconds';
                    break;
               case 1:
                    //More datailed.
                    days = Math.floor(Time_Left / (60 * 60 * 24));
                    Time_Left %= (60 * 60 * 24);
                    hours = Math.floor(Time_Left / (60 * 60));
                    Time_Left %= (60 * 60);
                    minutes = Math.floor(Time_Left / 60);
                    Time_Left %= 60;
                    seconds = Time_Left;
                    
                    dps = 's'; hps = 's'; mps = 's'; sps = 's';
                    if(days == 1) dps ='';
                    if(hours == 1) hps ='';
                    if(minutes == 1) mps ='';
                    if(seconds == 1) sps ='';
                    
                    document.getElementById('countdown').innerHTML = days + ' day' + dps + ' ';
                    document.getElementById('countdown').innerHTML += hours + ' hour' + hps + ' ';
                    document.getElementById('countdown').innerHTML += minutes + ' minute' + mps + ' and ';
                    document.getElementById('countdown').innerHTML += seconds + ' second' + sps;
                    break;
               default: 
                    document.getElementById('countdown').innerHTML = Time_Left + ' seconds';
               }
         }

De testpagina (die ik open in Firefox 1.0.x en IE6.x om te bekijken):
test.htm

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="klok.js"></script>

<script type="text/javascript">
function init()
{
    countdown(2005,9,4,22,10,1);
}
window.onload=init;
</script>
</head>

<body>

<div id="countdown"></div>

</body>
</html>

Alé ja, ik denk dat ik daar ergens al fataal de mist in ga. Nooit verschijnt er wat op de pagina, en mja, met de syntax van de js file of de HTML code is niets mis mee :-/ aleen niet erg functioneel natuurlijk

edit: enkel met innerHTML en niet met firstchild.nodevalue, wil het werken. anders toont hij niets en zegt hij dat er voor firstchild.nodevalue geen properties zijn ingesteld. Nu, ok, het werkt. Maar is er dan nog een syntax fout dat hij de getallen verkeerd behandelt? Ik krijg enkel te zien dat ik nog 36xxx dagen moet wachten tot kerst 2005. Of toont hij het bij jullie correct?

[ Voor 135% gewijzigd door Mizitras op 05-09-2005 12:29 ]

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

zaterdag 3 september 2005 01:19

Acties:

Verwijderd

Als ik het zo zie, moet je de functie countdown_clock aanroepen op de plek waar je de countdown wilt hebben. Deze functie zet zelf al met document.write een <div> met id countdown neer, dus die kun je dan weghalen (anders heb je dubbele id's, en dat loopt niet lekker).

Je moet dan natuurlijk niet vergeten deze functieaanroep tussen <script> tags te zetten.

Misschien kun je ook een linkje naar de pagina posten, dat scheelt een stuk. Ik kan zo namelijk niet zien wat er mis is.

zondag 4 september 2005 01:24

Acties:

Mizitras

Topicstarter

Ok, de HTM-testpagina staat in de starterspost. En het stukje code van de JS-file nu ook.

Hij toont nu de foute tijd, namelijk iets als 36525 days 20 hours 46 minutes and 24 seconds

[ Voor 47% gewijzigd door Mizitras op 04-09-2005 01:38 ]

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

zondag 4 september 2005 01:28

Acties:

disjfa

be

Scripts aanroepen:

HTML:

1	<script type="text/javascript" src="scriptnaam"></script>

Vergeet aub al die versies, dat is IE en zn slechte implementatie.

disjfa - disj·fa (meneer)
disjfa.nl

zondag 4 september 2005 01:31

Acties:

Verwijderd

Tja, nu je die andere code gepost hebt, is het ook wel heel erg duidelijk IE-only. document.all

Je kunt proberen alle document.all dingen te vervangen door document.getElementById of getElementByName, afhankelijk van hoe de elementen op de pagina staan. Daar kan ik niet meer over zeggen, omdat je dus nog steeds niet de volledige code hebt gepost.

Welke fouten staan er in Firefox in je Javascript Console overigens? Heb je daar al naar gekeken?

[ Voor 13% gewijzigd door Verwijderd op 04-09-2005 01:31 ]

zondag 4 september 2005 01:41

Acties:

Mizitras

Topicstarter

starterspost geupdateted; en de wat disjfa gezegd verandert; IE en firefox tonen nu beide de teller; maar het aantal resterende dagen, uren, enzo is dik verkeerd.

edit:

Error: document.getElementById.countdown has no properties
Source File: file:///c://Website/klok.js
Line: 50

Ik begrijp het niet.

PS: Die code voor een verwijzing naar mijn javascript file (in de htm-file) komt door Dreamweaver.

[ Voor 50% gewijzigd door Mizitras op 04-09-2005 01:48 ]

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

zondag 4 september 2005 01:57

Acties:

Verwijderd

Tip: google eens naar getElementById je gebruikt het zo verkeerd. Een beetje eigen initiatief kan geen kwaad. Je bent nu alleen maar met knippen/plakken bezig. Daar leer jij natuurlijk niets van.

zondag 4 september 2005 02:28

Acties:

Mizitras

Topicstarter

Ok, ik snap dat GetElementByld een waarde zoekt ahv zijn stringnaam, dus wat erachter ('hier dus zou komen'). En dit wordt dus rechts geplaatst, en wordt dan naar links geplaatst.
Maar....
ik dacht dus:
countdown.innerHTML = Time_Left;
Waar zou ik die GetElementByld dan gebruiken? Time_Left is op zich een variabele die in die functie wordt gebruikt, en (ik ken wat C-taal), die heeft daar dus een waarde en moet niet worden opgezocht, dus die ga ik niet tussen de haakjes plaatsen. countdown ook niet, want die is de naam van de functie, waaruit wordt geschreven en kent 'geen' waarde lijkt mij. En 'innerHTML' is het onderdeel dat schrijft binnen mijn pagina, dus..mja..ook niet.

En, nu heb ik toch al die dingen geprobeerd, en tussen die haakjes met ' en met " gewerkt. Want MSDN zegt mij GetElementByld te gebruiken met ("dubbele-aanhalingstekens"), terwijl mozilla.org dan weer werkt met ('ditdus'). Wat is nou het correcte?

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

zondag 4 september 2005 11:46

Acties:

Koeniepoenie

Mizitras schreef op zondag 04 september 2005 @ 02:28:
En, nu heb ik toch al die dingen geprobeerd, en tussen die haakjes met ' en met " gewerkt. Want MSDN zegt mij GetElementByld te gebruiken met ("dubbele-aanhalingstekens"), terwijl mozilla.org dan weer werkt met ('ditdus'). Wat is nou het correcte?

Maakt opzich niets uit

Het wordt beide als een string gezien, en zal dus gewoon werken. Verder moet je wel opletten dat het getElementById() is en niet GetElementById().

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337

zondag 4 september 2005 12:35

Acties:

Verwijderd

En je moet dus wél dat countdown als parameter voor getElementById gebruiken, dat is namelijk het ID waar je naar zoekt

.

dus dan krijg je dingen als

JavaScript:

1 2	document.getElementById('countdown').firstChild.nodeValue = days + ' day' + dps + ' '; document.getElementById('countdown').firstChild.nodeValue += hours + ' hour' + hps + ' ';

Waarbij ik ook even die ranzige innerHTML van je heb vervangen

.

enzovoorts...

[ Voor 18% gewijzigd door Verwijderd op 04-09-2005 12:36 ]

zondag 4 september 2005 18:53

Acties:

Mizitras

Topicstarter

Met firstChild.nodeValue komt hij nog steeds vragen om properties van een element.
Ook al is innerHTML geen standaard, nadat ik deze later terug had verandert, werkte het zo wel.

Maar als je zelf eens probeerd; krijgen jullie dan wel correcte tijden? Geef bijvoorbeeld eens kerstmis 2005 in, werkt het dan bij jullie?

Kan ik ook ergens een script stuk per stuk overlopen, alsof ik bezig ben het te debuggen, zodat ik de variabelen kan zien? Dat begrijp ik iets beter, en zo kan ik zien waar de programmeur fouten heeft emaakt in de code. (Alhoewel, op zijn site gebruikte hij dezelfde code, en die was wel juist aan het aftellen tot de kerstdagen :-/

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

zondag 4 september 2005 22:45

Acties:

Verwijderd

Je zou eens je code in Firefox kunnen draaien, en dan met de Venkman debugger. Ik heb daar hele goede verhalen over gehoord, hoewel ik er zelf niet zo veel ervaring mee heb.

maandag 5 september 2005 01:43

Acties:

Mizitras

Topicstarter

Maar dus met bovenstaande code, (topicpost was al aangepast weer), en zijn test.htm-bestand krijgen jullie ook zo'n foute resultaten? (ik heb geen andere pc's om het op te testen; en email/IM's worden geblokkeerd, dus het is wel erg k*t voor de moment.)

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

maandag 5 september 2005 02:29

Acties:

Verwijderd

Het werkt wel, maar met een hele zooi waarschuwingen in mijn Javascript Console.

Je declareert bijvoorbeeld niet de variabelen die je gebruikt, en dat is niet netjes. Je kunt het beste in de functie alle variabelen die je gaat gebruiken declareren met het var statement.

Daarnaast kun je javascript beter in het head gedeelte van je html-bestand zetten. Als je verder zelf op de plek waar je de counter wilt, een div met id countdown neerzet, kun je de countdown_clock functie wegflikkeren, en rechtstreeks countdown gebruiken. In dat geval kun je ook innerHTML vervangen door firstChild.nodeValue .

Het enige wat je dan nog rest is die <script>countdown(2005,9,4,22,10,1)</script> regel uit je body gedeelte weg te halen, en in je head te zetten. Je kunt dat dan het beste doen met iets als het volgende:

HTML:

<script type="text/javascript">
function init()
{
    countdown(2005,9,4,22,10,1);
}
window.onload=init;
</script>

En klaar ben je

.

[ Voor 5% gewijzigd door Verwijderd op 05-09-2005 02:33 ]

maandag 5 september 2005 14:05

Acties:

Mizitras

Topicstarter

Nou, tot dusver stropt het bij de HTML weer.

Ik heb het javascript gedeelte in de head geplaatst. (Niet de inhoud van de js-file hé? Want dat vond ik wat verwarrend wat je daarmee bedoelde.
En (zie topicstart), ik heb countdown tussen div gezet met ID.
Mag ik nu gelijk de hele functie uit de js-file van countdown_clock verwijderen? Daar staat toch de regel

code:

1	document.write(html_code);

???
Ik heb die in de functie eronder, helemaal onderana geplaatst, zodat hij daar de code uitschrijft, maar deed niets.

Maar goed, ik heb dus alles gedaan wat je zei dat ik nog aan die HTM-pagina kon veranderen. Maar toen ik die dan weer opende, zag ik helemaal niets meer. Ik heb geprobeerd met de verdere dingen in de js-file zelf die je zei, door die variabelen onder de functienaam met var year; var month; enzo te declareren en de functie countdown_clock later ook is te verwijderen. Maar dat gaf geen verschil.

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

maandag 5 september 2005 21:53

Acties:

Mizitras

Topicstarter

Dus, eigenlijk gezegd, alstie al verschijnt (wat hij daarvoor al eens deed, ook met IEonly namen), dan was de tijd ronduit verkeerd. Nu, met die andere voorgestelde code enzo, werkt de js-file niet. En bij het gebruik van firstchild.nodeValue, genereert de HTML ook daarop nog eens fouten en vraagt om properties. :-/

Kan je even de HTML-file (code) van mij kopiëren en tonen hoe je het dan juist bedoeld postzegel? Ik had het graag af tegen woensdagmiddag, wanneer ik de pagina met nog andere dingen publiceer zeg maar;

"the fucking alpha cpp compiler seems to fuck up the goddam type "LPITEMIDLIST", so to work around the fucking peice of shit compiler we pass the last param as an void *instead of a LPITEMIDLIST"

maandag 5 september 2005 23:28

Acties:

crisp

Devver

Pixelated

Woensdagmiddag af? dat wordt aftellen:

Intentionally left blank

dinsdag 6 september 2005 00:01

Acties:

Verwijderd

lol @ crisp.

Maar vooruit, alle flauwigheid daargelaten. Jouw probleem met de incorrecte tijd komt omdat je 2000 van het huidige jaartal aftrekt, terwijl je er juist 1900 moet toevoegen (Javascript telt het jaartal vanaf 1900, dus we leven nu in 105

). In jouw geval had je dus een afwijking van 3900 jaar te pakken, en dan krijg je grote verschillen hè

.

En het probleem met firstChild.nodeValue krijg je als er totaal geen tekens in de div zelf staan (dat kun je dan wel weer opvangen, maar dan wordt de code weer ingewikkelder). Als je dat allemaal oplost, krijg je het volgende:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Untitled Document</title>
        <script type="text/javascript" src="klok.js"></script>
        <script type="text/javascript">
            function init()
            {
                countdown(2005,9,7,0,0,1)
            }
            window.onload=init;
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
        <div id="countdown">
            <!-- hier komt de klok te staan -->
        </div>
    </body>
</html>

JavaScript:

function countdown(year, month, day, hour, minute, format)
{
    var days; var hours; var minutes; var seconds;
    var dps; var hps; var mps; var sps;
    
    var Today = new Date();
    var Todays_Year = Today.getFullYear();
    var Todays_Month = Today.getMonth();
    
    //Convert both today's date and the target date into miliseconds.
    var Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(),
                    Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();
    var Target_Date = (new Date(year, month -1, day, hour, minute, 00)).getTime();
    
    //Find their difference, and convert that into seconds.
    var Time_Left = Math.round((Target_Date - Todays_Date) / 1000);
    
    if (Time_Left < 0)
    {
        Time_Left = 0;
    }
    
    switch (format)
    {
        case 0:
            //The simplest way to display the time left.
            document.getElementById('countdown').firstChild.nodeValue = Time_Left + ' seconds';
            break;
        case 1:
            //More datailed.
            days = Math.floor(Time_Left / (60 * 60 * 24));
            Time_Left %= (60 * 60 * 24);
            hours = Math.floor(Time_Left / (60 * 60));
            Time_Left %= (60 * 60);
            minutes = Math.floor(Time_Left / 60);
            Time_Left %= 60;
            seconds = Time_Left;
            
            dps = 's'; hps = 's'; mps = 's'; sps = 's';
            if (days == 1) dps ='';
            if (hours == 1) hps ='';
            if (minutes == 1) mps ='';
            if (seconds == 1) sps ='';
            
            document.getElementById('countdown').firstChild.nodeValue = days + ' day' + dps + ' ';
            document.getElementById('countdown').firstChild.nodeValue += hours + ' hour' + hps + ' ';
            document.getElementById('countdown').firstChild.nodeValue += minutes + ' minute' + mps + ' and ';
            document.getElementById('countdown').firstChild.nodeValue += seconds + ' second' + sps;
            break;
        default:
            document.getElementById('countdown').firstChild.nodeValue = Time_Left + ' seconds';
    }
}

Natuurlijk is het niet de bedoeling dat ik jouw bugs oplos, maar goed, crisp had ook al een werkend voorbeeld geplaatsd, dus bij deze

.

Telt af naar hetzelfde moment als crisp, alleen ik mag hier geen HTML posten

[ Voor 10% gewijzigd door Verwijderd op 06-09-2005 12:28 ]

dinsdag 6 september 2005 00:29

Acties:

crisp

Devver

Pixelated

getYear() is niet Y2K-compliant, en verschillende browsers gaan daar anders mee om. Lukraak 1900 toevoegen is dus geen garantie dat het in alle browsers goed gaat. Je kan beter getFullYear() gebruiken - die geeft netjes een 4-digit jaartal terug en is dus Y2K-compliant

Maar sowieso is het overbodig; gewoon var Todays_Date = new Date().getTime(); is al voldoende

De datum berekeningen zijn sowieso fout omdat ze geen rekening houden met het feit dat de maand in new Date() 0 als offset heeft.

Intentionally left blank

dinsdag 6 september 2005 00:56

Acties:

Verwijderd

crisp schreef op dinsdag 06 september 2005 @ 00:29:
De datum berekeningen zijn sowieso fout omdat ze geen rekening houden met het feit dat de maand in new Date() 0 als offset heeft.

Daar wordt hier 1 aan toegevoegd. Beter opletten dus

.

dinsdag 6 september 2005 08:50

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 06 september 2005 @ 00:56:
[...]

Daar wordt hier 1 aan toegevoegd. Beter opletten dus .

Nee, ik let wel goed op: getMonth() geeft namelijk dezelfde 0-offset gebaseerde maand terug, dus je moet daar helemaal geen 1 bij optellen. Je moet juist bij de maand die als parameter meegegeven wordt (ervan uitgaande dat dat 1-12 is) 1 aftrekken.

Intentionally left blank

dinsdag 6 september 2005 09:20

Acties:

Verwijderd

crisp schreef op dinsdag 06 september 2005 @ 08:50:
[...]

Nee, ik let wel goed op: getMonth() geeft namelijk dezelfde 0-offset gebaseerde maand terug, dus je moet daar helemaal geen 1 bij optellen. Je moet juist bij de maand die als parameter meegegeven wordt (ervan uitgaande dat dat 1-12 is) 1 aftrekken.

We hebben het hier over een verschil. Dus of je nou van de hoogste één aftrekt, of bij de laagste een optelt, het komt op hetzelfde neer.

(a+1)-b = a-(b-1)

dinsdag 6 september 2005 09:28

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 06 september 2005 @ 09:20:
[...]

We hebben het hier over een verschil. Dus of je nou van de hoogste één aftrekt, of bij de laagste een optelt, het komt op hetzelfde neer.

(a+1)-b = a-(b-1)

Ik denk dat het toch wel degelijk uitmaakt of je het tijdsverschil tussen 1 januari en 1 februari uitrekend of tussen 1 februari en 1 maart

[ Voor 25% gewijzigd door crisp op 06-09-2005 09:29 ]

Intentionally left blank

dinsdag 6 september 2005 12:30

Acties:

Verwijderd

crisp schreef op dinsdag 06 september 2005 @ 09:28:
[...]

Ik denk dat het toch wel degelijk uitmaakt of je het tijdsverschil tussen 1 januari en 1 februari uitrekend of tussen 1 februari en 1 maart

Verdorie, je hebt gelijk. Stomme ik

.