[js] hoe kan ik een variabele variabele gebruiken?

[Madcat]

Ik wil een rating systeempje maken zodat als je op een serie van 5 sterren met je muis gaat, dat de ster die je hebt geselecteerd dan een kleurtje krijgt, en als je er dan op klikt dat het dan wordt gesubmit.
Alleen kan er op een enkele pagina meerdere ratings staan, met een verschillend aantal sterren.

nu ben ik al een beetje begonnen en ben met het volgende gekomen:

function showRating(starvalue,ratingvalue){
var ratingnumber = window.document.rating12.ratingid.value;
window.document.rating12.star1.src='/images/star.gif'
return 0;
}

Dit stukje code zal voor de rating 12 de 1e ster oplichten.
Nu wil ik eigenlijk dat de "ratingvalue" en de "starvalue" in de plaats komen van het cijfer.
en uiteindelijk als je de 3e ster selecteerd dat de 1e en 2e ster ook oplichten

Weet iemand hoe ik een variabele variabele kan doorgeven aan window.document?

edit:

Hoe zou ik het met een array moeten aanpakken dan?
ik heb het al geprobeerd, maar hij probeerd dan de naam van de array variabele te zoeken in window.document.. wat dus niet bestaat.

eval heb ik al geprobeerd:

als ik:
window.document.rating12.eval('star'+1).src='/images/star.gif' doe dan zegt hij "dat het niet gesupport wordt"
Of doe ik iets verkeerd?

De "objecten" zijn 'img' en die ondersteunen dat niet volgends mij, het staat ook nietin de elementen, dat werkt dacht ik alleen maar bij text/radio/enzo iets wat je kan submitten.

[ Voor 40% gewijzigd door Madcat op 21-05-2006 18:12 ]

[NMe]

Arrays gebruiken.

[RobIII]

-NMe- schreef op zondag 21 mei 2006 @ 18:06:
Arrays gebruiken.

Of eval

Maar inderdaad, arrays of desnoods met een getElementById('something'+myVar);

[ Voor 24% gewijzigd door RobIII op 21-05-2006 18:07 ]

[Verwijderd]

RobIII schreef op zondag 21 mei 2006 @ 18:07:

Maar inderdaad, arrays of desnoods met een getElementById('something'+myVar);

Bij formulieren bij voorkeur gebruik maken van document.forms en Form.elements, dit voorkomt onduidelijkheden een hoop gedoe.

[NMe]

een_madcat schreef op zondag 21 mei 2006 @ 18:05:
window.document.rating12.eval('star'+1).src='/images/star.gif' doe dan zegt hij "dat het niet gesupport wordt"

Eval is een vrije functie, geen method van het element rating12. Maar eval is vies (en RobIII moet branden in de hel alleen al omdat hij het durfde te noemen als oplossing ).

Voor arrays hoef je alleen het element maar een name te geven met 2 blokhaken erin, AFAIK.

[Verwijderd]

-NMe- schreef op zondag 21 mei 2006 @ 18:18:
[...]

Eval is een vrije functie, geen method van het element rating12. Maar eval is vies (en RobIII moet branden in de hel alleen al omdat hij het durfde te noemen als oplossing ).

Voor arrays hoef je alleen het element maar een name te geven met 2 blokhaken erin, AFAIK.

Niet echt. Dat heeft niets te maken met Javascript, hooguit met PHP. Voor Javascript maakt het over het algemeen niet zoveel uit hoe de elementen heten, als je maar geen namen van properties van het form element gaat gebruiken, of gereserveerde namen of iets dergelijks.

[Madcat]

bedankt,
ik heb het met het volgende werkend onder IE:

var starelement = document.getElementById('star'+'_'+ratingvalue+'_'+starvalue);
starelement.src='/images/nostar.gif';

maar dat werkt volgends mij alleen in IE, opera die pikt het niet namelijk
Weet iemand ook een oplossing die werkt voor meerdere browsers?

[ Voor 10% gewijzigd door Madcat op 21-05-2006 23:48 ]

[funkwurm]

Ik neem aan dat star hier een nummer is? ID's mogen niet met nummers beginnen, dus zet er even een letter of als je toch in die flow zit, even een _ ervoor.

[NMe]

'star' is, logischerwijs, een string en kan dus nooit een nummer zijn.

Trouwens, wat gaat er fout in Opera dan? Krijg je foutmeldingen? Andere fouten? En wat doet Firefox?

[funkwurm]

Dan is de fout wellicht dat star een variabele moet zijn, en dat je heb per ongeluk quoteerd waardoor het inderdaad een string wordt.

Verder is mijn vorige post natuurlijk het bewijs dat je niet de enige bent die dat soort dingen over het hoofd ziet

[NMe]

getElementById neemt gewoon een string aan. Hoe je die opbouwt (met variabelen of constante strings) boeit niet en dat kan de fout dus niet zijn.

[crisp]

Het enige verschil tussen IE en andere browsers is het feit dat IE ook (foutief) elementen met een name-attribuut teruggeeft bij het gebruik van getElementById

[Madcat]

goh vreemd ik heb namelelijk zowel het id als de name gevuld, de plaatjes heb ik als volgt:

HTML:

<a href='/wiki/extensions/RatingPost.php?ratingid=7&value=1 ' onMouseOver=showRating(1,7)><img alt='vote 1' name='star_7_1' id='star_7_1' src='/images/star.gif'></a>
<a href='/wiki/extensions/RatingPost.php?ratingid=7&value=2 ' onMouseOver=showRating(2,7)><img alt='vote 2' name='star_7_2' id='star_7_2' src='/images/star.gif'></a>
<a href='/wiki/extensions/RatingPost.php?ratingid=7&value=3 ' onMouseOver=showRating(3,7)><img alt='vote 3' name='star_7_3' id='star_7_3' src='/images/star.gif'></a>
etc...

en de javascript is als volgt:

JavaScript:

 function showRating(starvalue,ratingvalue){  
    //var ratingnumber = document.getElementById('ratingid');
         var starelements = document.getElementById('max_'+ratingvalue);
    var i;
    for(i=starvalue;i<=starelements.value;i++){
        var starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
        starelement.src='/images/nostar.gif';
    }       
    for(i=1;i<=starvalue;i++){
        var starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
        starelement.src='/images/star.gif';
    }           
    return true;
 } 

en onder IE werkt het wel, maar opera laat het afweten.

opera geeft de volgende error:

JavaScript - http://(knip)/wiki/index.php/Test_Page
Event thread: mouseover
Error:
name: ReferenceError
message: Statement on line 1: Reference to undefined variable: showRating
Backtrace:
  Line 1 of  script 
    showRating(2, 15);
  At unknown location
    [statement source code not available]

[ Voor 96% gewijzigd door crisp op 22-05-2006 00:05 ]

[crisp]

quote je attributen - de highlighting verraadt het al nu ik je code heb voorzien van de juiste tags

[Madcat]

hoe bedoel je, zo iets?
de fancy editor hier vind het dan wel leuk, maar opera nog steeds niet

HTML:

<a href="/wiki/extensions/RatingPost.php?ratingid=15&amp;value=1" onMouseOver="showRating(1,15)">[img]'/images/star.gif'></a>
<a[/img][img]'/images/star.gif'></a>
<INPUT[/img]<INPUT type='hidden' name='max_15' id='max_15' value='2'>

[ Voor 60% gewijzigd door Madcat op 22-05-2006 00:30 ]

[RobIII]

Los van het feit of het werkt of niet... Waarom gebruik je de ene keer single quotes ' en de andere keer dubbele quotes " Een beetje devver is natuurlijk wel consequent in zijn/haar code

[ Voor 26% gewijzigd door RobIII op 22-05-2006 00:24 ]

[Madcat]

RobIII schreef op maandag 22 mei 2006 @ 00:23:
Los van het feit of het werkt of niet... Waarom gebruik je de ene keer single quotes ' en de andere keer dubbele quotes " Een beetje devver is natuurlijk wel consequent in zijn/haar code

omdat het met single quotes ook niet werkt, the more the better
Maar ik zag het ook op het laatst hoor, nu is het ook allemaal single quotes.. (heeft nooit begrepen wat nu daadwerkelijk het verschil is)
maar ik heb zo'n vermoeden dat het probleem dieper zit dan dit, is getElementById wel een functie die door meerdere browsers wordt ondersteund?

[ Voor 14% gewijzigd door Madcat op 22-05-2006 00:27 ]

[crisp]

HTML:

<INPUT type='hidden' name='ratingid' value='15'><INPUT type='hidden' name='max_15' value='2'>

Deze elementen hebben geen ID, dus is het niet vreemd dat je ze met getElementById niet kan benaderen (behalve in IE dus).

De JS error in Opera doet echter vermoeden dat hij de hele functie showRating niet kan vinden, maar wat daar dan de oorzaak van zou kunnen zijn is glazenbol-werk zonder meer info.

Overigens hebben double quotes doorgaans de voorkeur vanwege het simpele feit dat de double quote zelf een named entity heeft en de single quote niet.

[ Voor 16% gewijzigd door crisp op 22-05-2006 00:30 ]

[Hermanvh]

het lijkt erop alsof je de Variabele Starelement meerdere keren probeert te declareren als var, terwijl dit maar 1x is toegestaan! Wanneer je de code zoals onderstaand gebruikt, zou het wel goed moeten zijn. Ik gebruik altijd www.jslint.com om JS te checken

JavaScript:

function showRating(starvalue,ratingvalue){  
     //var ratingnumber = document.getElementById('ratingid');
         var starelements = document.getElementById('max_'+ratingvalue);
     var i;
     for(i=starvalue;i<=starelements.value;i++){
         //DIT KAN DUS NIET: var starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         //Onderstaande is wel goed :)
         starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         starelement.src='/images/nostar.gif';
    }           
     for(i=1;i<=starvalue;i++){
         //DIT KAN DUS NIET: var starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         //Onderstaande is wel goed :)
         starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         starelement.src='/images/star.gif';
    }               
     return true;
 }

[ Voor 63% gewijzigd door Hermanvh op 22-05-2006 00:35 ]

[Madcat]

crisp schreef op maandag 22 mei 2006 @ 00:29:

HTML:

<INPUT type='hidden' name='ratingid' value='15'><INPUT type='hidden' name='max_15' value='2'>

Deze elementen hebben geen ID, dus is het niet vreemd dat je ze met getElementById niet kan benaderen (behalve in IE dus).

De JS error in Opera doet echter vermoeden dat hij de hele functie showRating niet kan vinden, maar wat daar dan de oorzaak van zou kunnen zijn is glazenbol-werk zonder meer info.

Overigens hebben double quotes doorgaans de voorkeur vanwege het simpele feit dat de double quote zelf een named entity heeft en de single quote niet.

klopt zag het ook net (had al stikum de post geedit)
maar inderdaad, het is net alsof opera de hele javascript niet kan vinden, erg raar.

*kijkt even in de wiki includes*

hmmz thanks:
<!--[if IE]>
<script type="text/javascript" src="/wiki/skins/common/IEFixes.js"></script>
<script type="text/javascript" src="/wiki/skins/common/rating.js"></script>


Super, Bedankt crisp het werkt nu op IE en opera. Morgen maar even safari en FF proberen

[ Voor 37% gewijzigd door Madcat op 22-05-2006 00:45 ]

[crisp]

Hermanvh schreef op maandag 22 mei 2006 @ 00:31:
het lijkt erop alsof je de Variabele Starelement meerdere keren probeert te declareren als var, terwijl dit maar 1x is toegestaan! Wanneer je de code zoals onderstaand gebruikt, zou het wel goed moeten zijn. Ik gebruik altijd www.jslint.com om JS te checken

Re-declarations zijn inderdaad niet netjes maar geen oorzaak van fouten. Het levert je doorgaans in een linter of andere checker hooguit een warning op (ik gebruik overigens de Firefox developer toolbar met strict JS warnings aan).

[Madcat]

Hermanvh schreef op maandag 22 mei 2006 @ 00:31:
het lijkt erop alsof je de Variabele Starelement meerdere keren probeert te declareren als var, terwijl dit maar 1x is toegestaan! Wanneer je de code zoals onderstaand gebruikt, zou het wel goed moeten zijn. Ik gebruik altijd www.jslint.com om JS te checken

JavaScript:

function showRating(starvalue,ratingvalue){  
     //var ratingnumber = document.getElementById('ratingid');
         var starelements = document.getElementById('max_'+ratingvalue);
     var i;
     for(i=starvalue;i<=starelements.value;i++){
         //DIT KAN DUS NIET: var starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         //Onderstaande is wel goed :)
         starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         starelement.src='/images/nostar.gif';
    }           
     for(i=1;i<=starvalue;i++){
         //DIT KAN DUS NIET: var starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         //Onderstaande is wel goed :)
         starelement = document.getElementById('star_'+ratingvalue+'_'+ i );
         starelement.src='/images/star.gif';
    }               
     return true;
 }

starelement is een tijdelijke variabele om daarna de image te kunnen zetten.
maar je hebt gelijk eigenlijk zou het netter zijn om daar een array voor te gebruiken.
of bovenin te declaren en daarna alleen nog maar te gebruiken.

[ Voor 8% gewijzigd door Madcat op 22-05-2006 00:54 ]