Functie stopt opeens...

[430xlkod]

Beste tweakers,

Ik heb een probleem met een deel van mijn website die ik moet maken voor school.
Omdat server-sided script talen NIET worden ondersteunt bij mij host moet ik grijpen naar de middelen die ik heb. Momenteel is dat javascript, het moet ook niet meer zijn dan dat.

Uitleg:
Ik heb een pagina, met een formulier waarin een gebruiker een lotnummer kan ingeven van een tombola. Zodra hij op de knop drukt, controleert hij als het nummer voorkomt (oorspronkelijk via PHP in een DB) en als dat zo is geeft hij terug wat er gewonnen is.

Probleem:
Ik heb een functie geschreven in javascript (even wennen aangezien ik javascript niet veel gebruik) om de controle te doen.
Ik zal de code hier posten.

HTML:

<form id="tombola" name="tombola" >
           <label><strong>Geef uw lotnummer in:</strong></label>
           <br />
           <input name="lotNr" type="text" />
           <input name="btnCheck" type="submit" value="Controleer!" onclick="return checkPrijs(this.form)" />
           </form>

En het javascript (ik heb een deel array eruit gelaten voor overzichtelijkheid...

JavaScript:

// JavaScript Document
/*
*
*Author: Joey Smeets
*Version: 1.000v (BETA)
*
*/
        var myLotnummer = new array();
        var myProductNaam = new array();
        var myURL = new array();
        
        var lotNr = 0;//kan ook beginnen bij bijv.: 34632
        for (var x = 0; x <= 249; x++){
           myLotnummer[x] = lotNr;//array vullen
           lotNr++;
        }//end for      
        
        //Array van namen vullen...
        myProductNaam[0] ="Beer";
        myProductNaam[1] ="T-Shirt";
        //.........................;
        myProductNaam[248] ="Computer";
        myProductNaam[249] ="Pennen";
        
        //Array van URL's vullen
        myURL[0] ="http://blabla.naam.suffix";
        myURL[1] ="http://blabla.naam.suffix";
        //....................................;
        myURL[248] ="http://blabla.naam.suffix";
        myURL[249] ="http://blabla.naam.suffix";

//Functie voor te bepalen als er iets gewonnen is
function checkPrijs(form){      
    var ingegevenNummer = String(document.tombola.lotNr.value);//waarde uit formulier halen en in variabele zetten
    window.alert("VARIABELE opgehaald" + ingegevenNummer);
    for (var i = 0; i <= 249; i++){
        window.alert("FOR loop ingegaan...");
            if (ingegevenNummer == String(myLotnummer[i])){
                window.alert("IF vergelijking ingegaan...");
                var win = String("U heeft met lotnummer "+String(myLotnummer[i])+" het volgende gewonnen: "+String(myProductNaam[i])+".");
                window.alert(win);
            }//end if 
            else {
                var loser = String("Helaas, geen geldig lotnummer ingevoerd!");
                window.alert(loser);
            }//close else
    }//end for
}//end functie

Ik heb de alerts even ertussen gezet om te zien waar hij stopt en gaat.
Probleem is, dat als ik een nummer invoer, hij dit doorgeeft en controleert. Ik krijg alle alerts te zien, tot en met "FOR loop ingegaan..." en daarna word de html pagina gewoon herladen???

Waar zit ik fout?

[Armageddon_2k]

Zou je je array niet eerst eens instantieren?

en je stukje:

code:

 for (var x = 0; x <= 249; x++){ 
           myLotnummer[x] = lotNr;//array vullen 
           lotNr++; 
        }//end for

Mag dit? nooit geweten dat je tijdens de declaratie van variabelen al een for loop mag gebruiken.

[ Voor 75% gewijzigd door Armageddon_2k op 17-01-2011 14:55 ]

[mrFoce]

offtopic:
handiger debuggen i.p.v. met Window Alerts werken doe je met Firebug. Zie http://getfirebug.com/logging

[Bosmonster]

Armageddon_2k schreef op maandag 17 januari 2011 @ 14:54:
Zou je je array niet eerst eens instantieren?

en je stukje:

code:

 for (var x = 0; x <= 249; x++){ 
           myLotnummer[x] = lotNr;//array vullen 
           lotNr++; 
        }//end for

Mag dit? nooit geweten dat je tijdens de declaratie van variabelen al een for loop mag gebruiken.

Sterker nog, dat is de enige juiste manier om binnen de scope van je loop een static variabele te declareren.

[Soultaker]

Is array (niet Array) überhaupt een class in JavaScript? Ik zou verwachten dat de code daar al stuk op gaat lang voordat de eerste messagebox getoond wordt.

[pieturp]

Na het onclick event zal het formulier gewoon worden gesubmit, en krijg je dus een page refresh (aangezien de default action van 't form de huidige pagina is)
Je zult dus ipv onclick beter onsubmit gebruiken en deze false laten returnen, om het event af te breken.

Daarnaast even wat do's and don'ts:
- gebruik geen String();
- window.alert(); schrijf je gewoon als alert(); // Maar liever console.log middels firebug o.i.d.
- gebruik geen magische constanten, maar gebruik array.length

[dwilmer]

Ik heb dit in Chrome zitten debuggen, dus het zou misschien kunnen dat IE en FF anders reageren.

Een beetje debuggen leert dat het volgende stukje niet leuk vindt:

JavaScript:

var myLotnummer = new array(); 
var myProductNaam = new array(); 
var myURL = new array();

Uncaught ReferenceError: array is not defined

Als je op die manier een array wil instantiëren, dan moet Array met een hoofdletter. Beter is het trouwens om blokhaken te gebruiken, dus zo:

JavaScript:

var myLotnummer = []

Oftewel: leer debuggen.

Edit @hieronder:
[] is sneller dan Array()
bron: http://w3fools.com/#js_obj_array

[ Voor 20% gewijzigd door dwilmer op 17-01-2011 15:38 ]

[Guillome]

Waarom is [] beter dan = Array() ?

[Leftblank]

Guillome schreef op maandag 17 januari 2011 @ 15:22:
Waarom is [] beter dan = Array() ?

Vijf tekens minder

[Guillome]

[430xlkod]

Oké, even klein foutje met het declareren van de array, dat moest dus met een hoofdletter.
Zoals ik zei, ben niet zo bekend (lees: niet) in JavaScript. Ik heb nu in elk geval de [] methode gebruikt.
@ pieturp, ik had het eerst op de onsubmit van het formulier zelf staan, maar wou plots niet meer werken. Blijkbaar nu weer wel.
@ dwilmer, debuggen heb ik nog nooit gedaan . Tevens merk ik dat FireBug niet werkt met mijn FF4b9.

Code zover:

HTML:

<form id="tombola" name="tombola" onsubmit="return checkPrijs(this.form)">
   <label><strong>Geef uw lotnummer in:</strong></label>
   <br />
   <input name="lotNr" type="text" />
   <input name="btnCheck" type="submit" value="Controleer!" />
</form>

En:

JavaScript:

//Functie voor te bepalen als er iets gewonnen is
function checkPrijs(form){
                
var ingegevenNummer = document.tombola.lotNr.value;//waarde uit formulier halen en in variabele zetten
    for (var i = 0; i <= myLotnummer.length; i++){
        if (ingegevenNummer == myLotnummer[i]){
            alert("U heeft met lotnummer "+myLotnummer[i]+" het volgende gewonnen: "+myProductNaam[i]+".");
            return true;
        }//end if 
        else {
            alert("Helaas, geen geldig lotnummer ingevoerd!");
            return false;
        }//close else
    }//end for
}//end functie

Maar hij geeft nu continu terug "Helaas, geen geldig lotnummer ingevoerd!". Ongeacht wat ik invul.

[Guillome]

Regel 4 zou ik zo doen:
document.forms["tombola"].elements["lotNr"].value
Hoe je het nu hebt werkt wel, maar is minder correct

[ Voor 26% gewijzigd door Guillome op 17-01-2011 16:31 ]

[Bosmonster]

Leftblank schreef op maandag 17 januari 2011 @ 15:30:
[...]

Vijf tekens minder

http://stackoverflow.com/...cript-arr/1273936#1273936

[Creepy]

430xlkod schreef op maandag 17 januari 2011 @ 16:28:
Maar hij geeft nu continu terug "Helaas, geen geldig lotnummer ingevoerd!". Ongeacht wat ik invul.

En toen ben je gaan debuggen, en bij het doorlopen van de code zag je de inhoud van beide variabelen in je if. Was dat wat je verwachte? Aka: ga eerst zelf debuggen (lang leve firebug (FF) of de script debugger (IE) etc). Om dat nu door ons te laten doen omdat in jou Firefox beta (!!!) iets stuk is....

[ Voor 18% gewijzigd door Creepy op 17-01-2011 16:59 ]

[430xlkod]

@ Guillome, done.

Ik heb het nu zo:

JavaScript:

var lotNr = 1;//kan ook beginnen bij bijv.: 34632
        for (var x = 0; x <= myLotnummer.length; x++){
           myLotnummer[x] = lotNr;//array vullen
           lotNr++;
        }//end for
        
        //Functie voor te kijken als er een geldig nummer is ingegeven (bereik).
        function checkNummer(){
        var ingegevenNummer = document.forms["tombola"].elements["lotNr"].value;//waarde uit formulier halen en in variabele zetten
            if (ingegevenNummer < lotNr){
                alert("U heeft een te klein nummer ingegeven.");
                return false;
            }//end if
            else if (ingegevenNummer > myLotnummer.length){
                alert("U heeft een te groot nummer ingegeven.");
                return false;
            }//end else if
            return true;
        }//end functie
        
        //Functie voor te bepalen als er iets gewonnen is.
        function checkPrijs(form){              
            var ingegevenNummer = document.forms["tombola"].elements["lotNr"].value-1;//waarde uit formulier halen en in variabele zetten
            for (var i = 0; i <= myLotnummer.length; i++){
                    if (ingegevenNummer == myLotnummer[i]){
                        alert("U heeft met lotnummer "+myLotnummer[i]+" het volgende gewonnen: "+myProductNaam[i]+".");
                        return true;
                    }//end if 
                    else {
                        alert("Helaas, het lotnummer is niet terug gevonden in onze database.");
                        return true;
                    }//close else
            }//end for
        }//end functie

Ik doe de check van de nummer zodra op de button is geklikt. Als die dus goed is, moet de submit van het formulier gebeuren.
Echter, maakt niet uit wat ik invoer, ik krijg altijd "te klein" error terug...

EDIT:

Creepy, het is dat ik nog niet weet hoe ik moet debuggen. Ik ga het nu bekijken!
Het is ook grotendeels dat ik nog niet heb gewerkt met javascript, enkel PHP (en daar werkt dit allemaal via XAMPP en een MySQL database).

[ Voor 6% gewijzigd door 430xlkod op 17-01-2011 17:05 ]

[dwilmer]

Kijk eens goed naar de waarde van lotNr na de eerste for-loop. Daar hoef je niet eens voor te debuggen, dat kun je ook zelf bedenken als je eens goed naar je code kijkt.

[430xlkod]

Dat had ik al gezien, maar zelfs als ik hem terug op 1 zet na de for-loop dan blijft de situatie hetzelfde .

[Verwijderd]

Ik weet niet of het de oplossing is, maar ik zie wel iets wat een probleem kan vormen.

In Javascript is er een duidelijk verschil tussen een String en een Integer. Het zou dus kunnen zijn dat de controles die je doet (bv. " if (ingegevenNummer == myLotnummer[i]) ") altijd FALSE terug geeft.
In dit geval is "ingegevenNummer" een String (komt uit formulier) en "myLotnummer[i]" een Integer (wordt gemaakt met "lotNr++".

Ik zou persoonlijk doen:

JavaScript:

// maak van form.value een Integer in BASE10
var ingegevenNummer = parseInt(document.forms["tombola"].elements["lotNr"].value, 10);

De rest zou dan goed moeten gaan.

[430xlkod]

Daar heb ik ook al aan gedacht en daarom alles naar String gecast.
Ik pas jou opmerking even toe.

(PS: Ik krijg mijn HTML pagina nog niets eens geopend in Chrome (waar de debugger makkelijk uitziet precies)).

Oké, ik heb dé fout gevonden denk ik. Mede dankzij de debugger in IE9.
Blijkbaar stond er dit:

JavaScript:

var lotNr = 1;//kan ook beginnen bij bijv.: 34632
        for (var x = 0; x <= myLotnummer.length; x++){
           myLotnummer[x] = lotNr;//array vullen
           lotNr++;
        }//end for 

Kortom, hij gaat door tot en met de grens van een signed integer (vermoed signed integer)?
In elk geval, als ik keek naar de waarde van lotNr, dan stond hij al ergens op 3456523. Daarom wou Chrome hem niet openen (loop detection?). Raar dat FF er enkel lang over deed om te openen, en IE opent hem direct. In elk geval, hij doet het nu half.
Probleem nu is dat hij telkens blijft terug geven dat nummer niet te vinden is in de "database".

EDIT:
Als ik lotnummer 1 ingeef dan geeft hij me netjes weer wat ik moet hebben.
Afbeelding:


Maar alles vanaf 1 tot en met 250 is niks... Bij 0 krijg ik echter wel netjes de melding dat cijfer te laag is, en bij 251 te hoog. Dus de check werkt.

EDIT:
Oké, door middel van de debug (echt wel een fijn ding, jammer dat ik het nu pas ken) ben ik achter een hele domme fout gekomen.
Het werkt nu ondertussen. Voor search bots, de oplossing hieronder:

JavaScript:

var lotNr = 0;//kan ook beginnen bij bijv.: 34632
        for (var x = 0; x <= 249; x++){
           myLotnummer[x] = lotNr;//array vullen
           lotNr++;
        }//end for
        lotNr = 0;
        
        //Functie voor te kijken als er een geldig nummer is ingegeven (bereik).
        function checkNummer(){
            var ingegevenNummer = parseInt(document.forms["tombola"].elements["lotNr"].value, 10)-1;//waarde uit formulier halen en in variabele zetten
            if (ingegevenNummer < lotNr){
                alert("U heeft een te klein nummer ingegeven.");
                return false;
            }//end if
            else if (ingegevenNummer > (myLotnummer.length)-1){
                alert("U heeft een te groot nummer ingegeven.");
                return false;
            }//end else if
            checkPrijs();
        }//end functie
        
        //Functie voor te bepalen als er iets gewonnen is.
        function checkPrijs(){
            var ingegevenNummer = parseInt(document.forms["tombola"].elements["lotNr"].value, 10)-1;
            for (var i = 0; i <= myLotnummer.length; i++){
                    if (ingegevenNummer == myLotnummer[i]){
                        alert("U heeft met lotnummer "+(myLotnummer[i]+1)+" het volgende gewonnen: "+myProductNaam[i]+".");
                        return true;
                    }//end if 
            }//end for
            return false;
        }//end functie

[ Voor 113% gewijzigd door 430xlkod op 17-01-2011 21:37 ]

[Guillome]

Chrome en FF hebben een veel snellere javascript engine dan IE, dus dat ie het daar 'beter' in deed heeft vast andere redenen dan dat het aan Chrome of FF ligt Mooi dat het nu werkt.
Regel 15 hoeft "(myLotnummer.length)" niet tussen haakjes

[430xlkod]

Dat dacht ik ook maar toch blijft Dreamweaver dan een fout geven . Anyways, het werkt nu dus ik ga er niet teveel werk meer aan vuil maken. Het is toch maar voor even nu...

(Het is niet professioneel, ik weet het .)

[Verwijderd]

Let ook op dat wanneer je een array in javascript begint met een hoge key, dat alle onderliggende keys ook bestaan.

Zo heb ik laatst bijvoorbeeld een array gevuld waarbij de key een 10-cijferige code was en daar liepen eigenlijke alle browsers op vast.

[430xlkod]

Hoe bedoel je dat?

[Guillome]

JavaScript:

var a = Array();
a[1000] = 50;
alert(a.length);

Levert op: 1001

[ Voor 16% gewijzigd door Guillome op 18-01-2011 15:15 ]

[Verwijderd]

Wanneer je een array key zet op 1000000, dan worden automatisch 0 t/m 999999 ook aangemaakt en krijgen dan de value "undefined". En browsers vinden dat over het algemeen niet leuk.

[Klaasvaak]

Nog twee aandachtspuntjes

Je doet nu telkens een controle op het ingegeven nummer -1.
Indien lotNr = 0, dan krijg je myLotnummer[0] = 0.
Als iemand dan vervolgens zijn lot met nummer 0 checked:

var ingegevenNummer = parseInt(document.forms["tombola"].elements["lotNr"].value, 10)-1; // = -1,
dus alert("U heeft een te klein nummer ingegeven.");

en

JavaScript:

            else if (ingegevenNummer > (myLotnummer.length)-1){ 
                alert("U heeft een te groot nummer ingegeven."); 
                return false; 
            }//end else if

Hier controleer je of het ingegeven nummer kleiner is dan lengte van de array 'myLotnummer', deze is juist indien lotNr = 0.
Voor de waarde van het laatste lotnummer: myLotnummer[myLotnummer.length-1]

[430xlkod]

Klopt het zo dan wel?

JavaScript:

var lotNr = 1;//kan ook beginnen bij bijv.: 34632
        for (var x = 0; x <= 249; x++){
           myLotnummer[x] = lotNr;//array vullen
           lotNr++;
        }//end for
        lotNr = 1;
        
        //Functie voor te kijken als er een geldig nummer is ingegeven (bereik).
        function checkNummer(){
            var ingegevenNummer = parseInt(document.forms["tombola"].elements["lotNr"].value, 10);
            if (ingegevenNummer < lotNr){
                alert("U heeft een te klein nummer ingegeven.");
                return false;
            }//end if
            else if (ingegevenNummer > myLotnummer.length){
                alert("U heeft een te groot nummer ingegeven.");
                return false;
            }//end else if
            checkPrijs();
        }//end functie
        
        //Functie voor te bepalen als er iets gewonnen is.
        function checkPrijs(){
            var ingegevenNummer = parseInt(document.forms["tombola"].elements["lotNr"].value, 10);
            for (var i = 0; i <= myLotnummer.length; i++){
                    if (ingegevenNummer == myLotnummer[i]){
                        alert("U heeft met lotnummer "+(myLotnummer[i])+" het volgende gewonnen: "+myProductNaam[i]+".");
                        return true;
                    }//end if 
            }//end for
            return false;
        }//end functie

Ik zat wat in de war denk ik met de index van de array en de waarde die er telkens insteekt van het lotnummer.

[ Voor 6% gewijzigd door 430xlkod op 19-01-2011 12:29 ]

[Guillome]

430xlkod schreef op woensdag 19 januari 2011 @ 12:29:
Klopt het zo dan wel?

Weet ik niet, werkt ie goed?

[430xlkod]

Hij werkt zoals het hoort ja, maar ervoor ook al .

Overigens, wat Terminal13 zei, kan dit opgelost worden? Als je Array nu begint vanaf, laat zeggen, 4523. Dat die eerste plaatsen niet worden gemaakt?

[Guillome]

Ik weet niet hoe netjes het is, maar het kan zo

JavaScript:

var a = Array();
a["key_5000"] = 500;
var i = 4000;
a["key_" + i] = 10;

alert(a["key_5000"]);
alert(a["key_" + i]);

[Klaasvaak]

[0,1].length geeft 2.
[0,1][2] bestaat niet, dus in je for-loopjes <= wijzigen in <.
Dan kan die 249 (aantal loten -1) ook naar 250 (aantal loten).

Dat probleem met de array speelt hier niet, omdat je loopt van x=0 tot x=aantal loten.
En niet van x=lotNr tot x=lotNr+aantal loten.

[430xlkod]

Maar dat probleem gaat wel komen doordat er loten zijn die beginnen in de 3.456.342 ergens.
Dus dan is de range van 3.456.342 tot en met 3.456.592 en zal dat dus wel komen dat probleem.

[Klaasvaak]

JavaScript:

var startLot = 34632;
var aantalLoten = 250;


var myLotnummer = [];
var lotNr = startLot;

for (var x = 0; x < aantalLoten; x++){
 myLotnummer[x] = lotNr;//array vullen 
 lotNr++; 
}
lotNr = startLot;

//myLotnummer[0] is 34632
//myLotnummer.length-1 is 249
//myLotnummer[249] = 34881

//zo krijg je altijd een array van 0 t/m het aantal loten -1.
//Als je het lotnummer als key zou gebruiken, zal het zich wel voordoen.

var startLot = 34632;
var aantalLoten = 250;

var myLotnummer = [];

for (var x = startLot; x < startLot + aantalLoten; x++){
 myLotnummer[x] = x;//array vullen 
}

//myLotnummer[0] is undefined
//myLotnummer[34632] is 34632
//myLotnummer[34881] = 34881

//Dan zou je beter een object kunnen gebruiken

var myLotnummer = {};
myLotnummer['_34632'] = {prijs: 'Beer', url: 'beer.htm'};
myLotnummer['_34633'] = {prijs: 'T-shirt', url: 'shirt.htm'};

if(typeof myLotnummer['_'+ingegevenNummer] != 'undefined'){
 alert("U heeft met lotnummer "+ingegevenNumme+" het volgende gewonnen: "+myLotnummer['_'+ingegevenNummer].prijs+".");
}
else{
  alert("Helaas, het lotnummer is niet terug gevonden in onze database.");
}