[JS] undefined variable

[martijn2008]

Ik heb me nu al een tijd blind op staan staren op dit stukje frustrerend stukje code:

JavaScript:

alert(laatsteJaar);
if(2012 == laatsteJaar){
    alert(2012);
}
var test ="j" + laatsteJaar;
$(test).show();

Wat er gebeurd als ik het uitvoer in FireFox. Ik krijg een alert met de tekst undefined, daarna krijg ik een alert met de tekst 2012. En $(test).show() wordt goed uitgevoerd. Maar omdat die twee alerts nergens op slaan haal ik ze weg en houd ik dit over:

JavaScript:

var test ="j" + laatsteJaar;
$(test).show();

Als ik dat zegt FireBug ik heb een error op de laatste regel van het fragment. Omdat $(test) null is. Als ik dan met FireBug met me muis over de variabelen ga krijg ik. Bij laatsteJaar "2012" in me beeld, ga ik dan over test, dan staat er "jundefined" en omdat $("jundefined") niet bestaat is het logisch dat er dan een fout komt.

Wat er nu precies gebeurd snap ik niet, want op het ene moment is laatsteJaar undefined en op het andere moment is het "2012". Kan iemand me uitleggen wat er gebeurd en waarom het fout gaat en natuurlijk wil ik ook graag weten hoe ik ervoor kan zorgen dat het werkt zonder de 2 alerts. Alvast bedankt voor reacties

[RobIII]

Wat er gaande is weet ik niet zo 1,2,3 maar ik vermoed dat je een variabele hebt die ook als id in de DOM voorkomt. Gut feel.

[Verwijderd]

1) debuggen doe je met console.log(), niet met alert().

2) Ik gok op scope problemen, maar zeker weet ik het niet. Post eens wat meer context van de code?

Also, sense it does not make, the code.

[ Voor 12% gewijzigd door Verwijderd op 05-02-2012 19:33 ]

[Cartman!]

De grote vraag is waar jij 'laatsteJaar' vandaan trekt, definieer je die ergens of is verwacht je dat die variabele magisch ergens anders vandaan komt?

[martijn2008]

Oke dan toch maar een code dump, als er nog meer dingen beter en handiger kunnen hoor ik het graag, ik gebruik de prototype liberary. Dus dan toch maar een code dump, ik denk niet dat de bijbehorende HTML nodig, dus dat post ik dan ook, maar niet als het toch nodig blijkt hoor ik het wel. Ik zal morgen wel even voor een live demo zorgen.

JavaScript:

// JavaScript Document
*snip*

[ Voor 88% gewijzigd door RobIII op 05-02-2012 20:19 ]

[RobIII]

martijn2008 schreef op zondag 05 februari 2012 @ 20:12:
Oke dan toch maar een code dump

Euh, nee. 204(!) regels code dumpen is hier niet de bedoeling. We verwachten enkel relevante(!) delen code; geen crapload aan code die niet terzake doet.

martijn2008 schreef op zondag 05 februari 2012 @ 20:12:
als er nog meer dingen beter en handiger kunnen hoor ik het graag

Ook dat is hier niet de bedoeling. Concrete vragen zijn van harte welkom maar we zitten hier niet om code te reviewen; dat valt, ondanks dat 't je nu om code gaat, onder sitechecks.

Verder: je hebt al wat hints/tips gehad in dit topic, doe daar eens wat mee en ga eens debuggen (zie Debuggen: Hoe doe ik dat?).

Je zult, wil je zinnige, relevante, info posten in dit topic een gestripte/uitgeklede testcase moeten maken om je probleem te pinpointen. Ik zal je vast verklappen: 99% kans dat je dan zelf je probleem al vindt. Als je alle irrelevante JS, HTML en whathaveyou achterwege laat dan staart de oorzaak je waarschijnlijk recht in je gezicht en anders heb je 'm weggestript en werkt je testcase zoals je zou verwachten. Either way moet je makkelijk(er) kunnen pinpointen waar 't probleem dan vandaan komt.

[ Voor 32% gewijzigd door RobIII op 05-02-2012 20:27 ]

[martijn2008]

Er hoeft van mij geen code gereviewed te worden, maar ik wil alleen maar zeggen schroom niet om commentaar te geven, als je er geen zin in hebt moet je het ook zeker niet doen.

JavaScript:

// JavaScript Document
*snip*
Waar was ik precies onduidelijk in?
**Relevante** code graag; AJAX request/response en andere zaken die totaal
niets met je probleem te maken hebben kun je allemaal prima achterwege laten.

jammer dat je niet alles laat staan want het was volgens mij nog wel redelijk snel te begrijpen, en ik liet eerst een heel klein stukje zien, om dit te voorkomen, maar het was te weinig, omdat er mss ergens iets in conflict is.

[ Voor 173% gewijzigd door RobIII op 05-02-2012 20:33 ]

[RobIII]

martijn2008 schreef op zondag 05 februari 2012 @ 20:26:
Er hoeft van mij geen code gereviewed te worden, maar ik wil alleen maar zeggen schroom niet om commentaar te geven, als je er geen zin in hebt moet je het ook zeker niet doen.

En ik zeg dat we dat hier als ongewenst beschouwen en 't dus niet toestaan zoveel code de "dumpen" Als je gewoon relevante zaken post hoef je ook geen disclaimers te plaatsen dat men geen commentaar hoeft te geven als men dat niet wil

[ Voor 14% gewijzigd door RobIII op 05-02-2012 20:28 ]

[Verwijderd]

Ik kan je specifieke probleem niet vinden.

Qua stijl valt er wel veel te verbeteren

Voorbeeldjes:

JavaScript:

// Je mag variable declaraties chainen.
var var1, 
    var2,
    var3;

//Als je meerdere for loopjes hebt, dan een keer i declareren en hergebruiken.
var i;

for (i=0; i<x; i++) {
    // code
}

for (i=0; i<y; i++) {
    // weer een loop
}

[martijn2008]

Bedankt voor de moeite

Verwijderd schreef op zondag 05 februari 2012 @ 20:30:
Ik kan je specifieke probleem niet vinden.
Qua stijl valt er wel veel te verbeteren
Voorbeeldjes:

JavaScript:

// Je mag variable declaraties chainen.
var var1, 
    var2,
    var3;

Oke bedankt goeie tip, maar denk ik meer persoonlijk.

martijn2008 schreef op zondag 05 februari 2012 @ 20:26:
Er hoeft van mij geen code gereviewed te worden, maar ik wil alleen maar zeggen schroom niet om commentaar te geven, als je er geen zin in hebt moet je het ook zeker niet doen.

JavaScript:

// JavaScript Document
*snip*
Waar was ik precies onduidelijk in?
**RELEVANTE** code graag; AJAX request/response en andere zaken die totaal niets met je probleem te maken hebben kun je allemaal prima achterwege laten.

jammer dat je niet alles laat staan want het was volgens mij nog wel redelijk snel te begrijpen, en ik liet eerst een heel klein stukje zien, om dit te voorkomen, maar het was te weinig, omdat er mss ergens iets in conflict is.

Ik denk dat je onduidelijk bent in het feit, dat ik niet weet hoe ver ik me code moet minimaliseren, maar men toch het probleem kan zien, want het gaat hier blijkbaar om het grote geheel. Ik had de code toch al aanzienlijk ingekort, maar daar ben jij het blijkbaar niet mee eens.... *getting mad*

[ Voor 61% gewijzigd door martijn2008 op 05-02-2012 20:35 ]

[RobIII]

Heb je nou al eens gewoon een console.log(laatsteJaar) gedaan en die geïnspecteerd? Wat zie je dan? En heb je je HTML al eens bekeken of er een element in voorkomt met een id dat "laatsteJaar" is?

martijn2008 schreef op zondag 05 februari 2012 @ 20:34:
Ik denk dat je onduidelijk bent in het feit, dat ik niet weet hoe ver ik me code moet minimaliseren, maar men toch het probleem kan zien, want het gaat hier blijkbaar om het grote geheel.

Hoe is heel dat Ajax gebeuren relevant? Hoe zijn de eerste 41 regels code die je postte relevant?

martijn2008 schreef op zondag 05 februari 2012 @ 20:34:
*getting mad*

Dat doe je toch écht zelf.

[ Voor 59% gewijzigd door RobIII op 05-02-2012 20:37 ]

[martijn2008]

nee er is geen id=laatsteJaar
en doet console.log() niet het zelfde als FireBug?

[Verwijderd]

Meneer mod, kunnen wij niet iets vriendelijker zijn? De code was trouwens vrij relevant, er zaten misschien een paar stukjes bij die er niet to deden, maar dat was niet buiten proporties.

[RobIII]

Verwijderd schreef op zondag 05 februari 2012 @ 20:39:
Meneer mod, kunnen wij niet iets vriendelijker zijn? De code was trouwens vrij relevant, er zaten misschien een paar stukjes bij die er niet to deden, maar dat was niet buiten proporties.

Kaart dat gerust even aan in Feedback op moderatie binnen de Devschuur maar hou 't uit dit topic a.u.b. Ik heb nu al genoeg moeite 't nog op de rails te houden.

martijn2008 schreef op zondag 05 februari 2012 @ 20:36:
nee er is geen id=laatsteJaar
en doet console.log() niet het zelfde als FireBug?

console.log() zal in ieder geval, wanneer je in een alert enkel "2012" zal zien, bijvoorbeeld tonen dat 't om een #textnode gaat die de text 2012 bevat om maar eens wat te noemen.

En een uitgeklede testcase?

[ Voor 34% gewijzigd door RobIII op 05-02-2012 20:45 ]

[pedorus]

In plaats van een kort voorbeeld te maken van een scripje waar het misgaat, zou je ook de begrippen closure, binding, en scope in combinatie met javascript kunnen googelen en leren. Zeer waarschijnlijk dat je die nog niet voldoende onder de knie hebt.

[martijn2008]

Ik ben bekend met het begrip scope, maar ik dacht toch wel dat dat goed ging, omdat ik de variabele declareer buiten alle functies om, maar wat kan ik dan nu het beste veranderen. Ik heb gegoogled closure en binding, maar daar zijn de voorbeelden volgens mij veel ingewikkelder dan mijn stukje code.

[Asator]

RobIII schreef op zondag 05 februari 2012 @ 20:34:
Hoe is heel dat Ajax gebeuren relevant?

Volgens mij is dat best relevenant. Ik ben geen JS expert maar de OP zou er goed aan doen is te kijken naar de volgorde waarin de code wordt uitgevoerd.

Hint: De A in AJAX staat voor Asynchronous en je hebt niet voor niets die onSuccess callback functie gemaakt.

Nog een tip. Bij het vergelijken in JS kan je beter gebruik maken van === aangezien de == niet al te goed geïmplementeerd is. Zie ook de volgende code.

JavaScript:

var foo = 2012;
foo == 2012 // True
foo == "2012" // True, lijkt me niet dat je dit wilt.

foo === 2012 // True
foo === "2012" // False, zo hoort het wel.

[RobIII]

Asator schreef op maandag 06 februari 2012 @ 10:36:
[...]


Volgens mij is dat best relevenant. Ik ben geen JS expert maar de OP zou er goed aan doen is te kijken naar de volgorde waarin de code wordt uitgevoerd.

De ajax code zélf is irrelevant; hooguit dat feit dat AJAX gebruikt wordt boeit op dit moment.

Nog een tip. Bij het vergelijken in JS kan je beter gebruik maken van === aangezien de == niet al te goed geïmplementeerd is. Zie ook de volgende code.

De == operator doet precies wat gedocumenteerd is, dat dat niet altijd even intuïtief is is wat anders De === operator vergelijkt ook de types, niet alleen de (implicit casted) values.

Zolang TS geen context/relevante code/testcase post blijft 't koffiedik kijken vrees ik.

[ Voor 16% gewijzigd door RobIII op 06-02-2012 10:50 ]

[martijn2008]

Oke, maar == operator, maakt de rest blijkbaar wel werkend, en hoe kan dat dan? Ik weet niet beter dan de == operator het mogelijk maakt variabele met elkaar te kunnen vergelijken, maar dat daarmee niet veranderd kan worden met variabele. Maar ik kruip over 20 minuten achter me pc, en dan "kleed" ik de boel nog verder uit. En upload ik een live demo, voor diegene die wel geïnteresseerd zijn in de hele code.

Ik ken het verschil tussen de == en === operator, maar het maakt mij niet uit of de 2012 een getal is of per ongeluk een string, of gaat het daardoor wel fout bij de $(test), ik heb volgens mij al een keer eerder $(2012) en $("2012") geprobeerd, ook al mag je id niet met een getal beginnen, dus daarom wil ik er een j voorzetten.

Oke de Ajax.request functies zijn wss minder relevant, maar toch wel de andere functies die iets met de variabele doen. Maar ik ga dus eerst nog even zelf aan de slag...

[ Voor 37% gewijzigd door martijn2008 op 06-02-2012 12:11 ]

[RobIII]

Asator in "[JS] undefined variable" heeft wel degelijk een relevant punt; je moet eens kijken naar het asynchrone aspect van Ajax en wat dat voor implicaties heeft in jouw probleemstuk.

martijn2008 schreef op maandag 06 februari 2012 @ 12:04:
Oke, maar == operator, maakt de rest blijkbaar wel werkend, en hoe kan dat dan?

Het verschil tussen de == en === operator is, zoals ik al zei, dat de === operator ook de types vergelijkt, verder niets.

martijn2008 schreef op maandag 06 februari 2012 @ 12:04:
Maar ik kruip over 20 minuten achter me pc, en dan "kleed" ik de boel nog verder uit. En upload ik een live demo, voor diegene die wel geïnteresseerd zijn in de hele code.

Zolang je de uitgeklede versie, die dus enkel code om je probleem te reproduceren bevat, post kan dat prima. Maar ik zou eerst eens gaan kijken naar de hint die je nu hebt gehad. Veel duidelijker wordt 't namelijk niet

Op regel 41 doe je een Ajax call welke "een keer" klaar zal zijn; echter ondertussen hobbelt je code verder tot 'ie bij regel 57 komt en daar is niet gegarandeerd dat die variabele gezet zal zijn inmiddels. Een "alert" lost je probleem op omdat de code daar pauzeert tot jij OK drukt in die alert. Ondertussen zal die Ajax call voltooien en de variabele zetten.

Waarschijnlijk is 't opgelost als je de zaken die afhankelijk zijn van je Ajax-call resultaat na regel 41 dus verhuist naar de onSuccess functie.

Dat is meteen een mooi voorbeeld waarom je geen enorme lappen code moet posten, niemand heeft zin 't helemaal door te spitten en de subtiele(re) problemen gaan op in 't grote(re) geheel.

Wat ik wél, schoorvoetend , wil toegeven is dat de laatsteRonde functie relevant(er) was dan ik in eerste instantie vermoedde. Neemt niet weg dat TS de code beter kent en dus (beter) had geweten wat wél en niet relevant was geweest en dan was dat detail ook niet opgegaan in 'het bos'

[ Voor 34% gewijzigd door RobIII op 06-02-2012 12:19 ]

[martijn2008]

uhmm, eindelijk tot me doorgedrongen dat er niet gewacht wordt op AJAX. En dat de request meestal te lang duur en soms is hij op tijd en kan verwerkt worden. Doordat het af en toe wel werkt wist ik niet waar het aan lag. Dus ik heb die code maar verplaats naar de onSucces functie. Ik weet niet of het dan nog wel netjes is, maar het werkt iig wel.

Dit alles voordat ik jou laatste bericht las, maar toch bedankt voor de uiteindelijk goede uitleg

offtopic: Leuk blog heb je trouwens over UPC

[ Voor 5% gewijzigd door martijn2008 op 06-02-2012 13:09 ]

[Bosmonster]

martijn2008 schreef op maandag 06 februari 2012 @ 13:07:
uhmm, eindelijk tot me doorgedrongen dat er niet gewacht wordt op AJAX. En dat de request meestal te lang duur en soms is hij op tijd en kan verwerkt worden. Doordat het af en toe wel werkt wist ik niet waar het aan lag. Dus ik heb die code maar verplaats naar de onSucces functie. Ik weet niet of het dan nog wel netjes is, maar het werkt iig wel.

Sterker nog, zo hoort het. Vandaar dat het de A ook staat voor Asynchronous...