[JS] Array doorwandelen

[Verwijderd]

Ik heb een stuk javascript geschreven, wat theoretisch gezien een aantal velden 1 voor 1 langs zou moeten lopen, en elk leeg veld vullen met een stukje tekst. Hij werkt echter niet. Het stuk code (wordt body onload aangeroepen):

JavaScript:

<script type="text/javascript">
    var dinges = new Array("voorletters", "voornaam", "achternaam", "achternaam2");
    
    var boodschap = new Array("Vul hier uw voorletters in", "Vul hier uw voornaam in", "Vul hier uw achternaam in", "Vul hier uw tweede achternaam in");

    function replaceEmpty() {
        for (i = 0; i < fields.length; i++) {
            if (document.getElementById(dinges[i]).value == "") {
            document.getElementById(dinges[i]).value == boodschap[i].value
            }
        }
    }
</script>

Het probleem is dat elke keer dat ik dinges[i] of boodschap[i] aanroep, dit niet omgezet wordt in bijbehorende waarde. Help?

[ Voor 0% gewijzigd door een moderator op 06-10-2008 17:30 . Reden: Code=js toegevoegd :Y) ]

[André]

== = =

[Verwijderd]

André schreef op vrijdag 03 oktober 2008 @ 16:47:
== = =

hehe lekker cryptisch weer maar had 't gezien ja. Ik krijg de melding "document.getElementById(dinges[i]) has no properties" in FireBug... en dat begrijp ik, want (dinges[i]) wordt niet omgezet naar bijbehorende waarde... Hoe doe ik dat zeg maar?

Huidige code:

JavaScript:

<script type="text/javascript">

    var dinges = new Array("voorletters", "voornaam", "achternaam", "achternaam2");

    var boodschap = new Array("Vul hier uw voorletters in", "Vul hier uw voornaam in", "Vul hier uw achternaam in", "Vul hier uw tweede achternaam in");
        
    function replaceEmpty() {       
        for (i = 0; i < dinges.length; i++) {
            if (document.getElementById(dinges[i]).value == "") {
            document.getElementById(dinges[i]).value = boodschap[i].value
            }
        }
    }
</script>

[André]

Zet een formulier om je input heen en doe het zo:

JavaScript:

function replaceEmpty()
{        
  for (i = 0; i < dinges.length; i++)
  {
    var f = document.forms["formulier"].elements[dinges[i]];
    if (f.value == "")
    {
      f.value = boodschap[i];
    }
  }
}

[Verwijderd]

Ah super! werkt bijna, enige rare is dat het eerste veld "undefined" bevat in plaats van de boodschap die ik verwacht... Enig idee?

Thanks tot zover iig!

[_Thanatos_]

en als je de literal array notatie gebruikt ipv de Array constructor (die overigens sowieso af te raden is)?

JavaScript:

var dinges = ["voorletters", "voornaam", "achternaam", "achternaam2"]; 
var boodschap = ["Vul hier uw voorletters in", "Vul hier uw voornaam in", "Vul hier uw achternaam in", "Vul hier uw tweede achternaam in"];

[Verwijderd]

_Thanatos_ schreef op vrijdag 03 oktober 2008 @ 18:51:
en als je de literal array notatie gebruikt ipv de Array constructor (die overigens sowieso af te raden is)?

JavaScript:

var dinges = ["voorletters", "voornaam", "achternaam", "achternaam2"]; 
var boodschap = ["Vul hier uw voorletters in", "Vul hier uw voornaam in", "Vul hier uw achternaam in", "Vul hier uw tweede achternaam in"];

Nee werkt ook niet... Hmm...

[Exception]

offtopic:
Even een vraagje tussen door aan _Thanatos_: Waarom is een 'Array constructor' af te raden?

[_Thanatos_]

@Jeff van Hees
Omdat het onvoorspelbaar gedrag kan veroorzaken. Als je new Array(3) uitvooert, krijg je een array met 3 elementen, en niet een array met het element "3", terwijl new Array("blaat") dat wel doet. Volgens de specs dan. Daarnaast is Array gewoon een globale functie, en geen echte constructor, net als Numer() en String().

@onex77
Net ff een testje gedaan met dit:

HTML:

<script type="text/javascript">
//<![CDATA[
var a = ["test1", "test2", "test3"];
var b = ["antw1", "antw2", "antw3"];
for (var i = 0; i < a.length; i++)
  alert(a[i] + " - " + b[i]);
//]]>
</script>

Werkt gewoon. Ik krijg alertjes:

• test1 - antw1
• test2 - antw2
• test3 - antw3

[ Voor 34% gewijzigd door _Thanatos_ op 06-10-2008 13:26 ]

[Crayne]

Post de HTML van je formulier ook eens. Als je daar een typfout in een ID hebt gemaakt houdt het ook al snel op.

[Verwijderd]

In javascript is er geen verschil tussen constructors en functies. new Array(3) en new Array("3") is geen onvoorspelbaar gedrag, maar gewoon volgens spec. Niks onvoospelbaars dus, vooropgesteld dat je kennis hebt van de taal.

Waar het om gaat is dingen als typeof en instanceof en constructor niet hetzelfde oplevert, maar da's nou juist bij Array niet het geval.

[tonyisgaaf]

Verwijderd schreef op dinsdag 07 oktober 2008 @ 16:14:
(...)
Waar het om gaat is dingen als typeof en instanceof en constructor niet hetzelfde oplevert, maar da's nou juist bij Array niet het geval.

Em, dat is toch juist het probleem van een Array in JS, dat de 'typeof' van een Array 'object' is? Althans, dat beweert Douglas Crockford. Heb het zelf niet getest. Of ik begrijp je verkeerd...

[.oisyn]

uhm, typeof van alle objecten geeft 'object'. Als je wilt weten of het een specifieke instance ergens van is gebruik je instanceof, en dat werkt bij Array net zo goed als bij eigen "classes". [1, 2, 3] instanceof Array geeft true, net als dat new Bla() instanceof Bla true geeft. En [1, 2, 3].constructor geeft ook gewoon Array.

[ Voor 7% gewijzigd door .oisyn op 07-10-2008 17:34 ]

[crisp]

tonyisgaaf schreef op dinsdag 07 oktober 2008 @ 16:23:
[...]

Em, dat is toch juist het probleem van een Array in JS, dat de 'typeof' van een Array 'object' is? Althans, dat beweert Douglas Crockford. Heb het zelf niet getest. Of ik begrijp je verkeerd...

Douglas beweert wel meer, maar met name omdat bepaalde dingen niet zo zijn zoals hij het zou willen zien...

[Cartman!]

Lees je eens in over JSON, dat gaat je een hoop problemen met arrays besparen. Er ging voor mij een wereld voor me open toen ik daarmee ging werken Ook serverside communicatie via JSON is erg praktisch via XHR

[crisp]

.oisyn schreef op dinsdag 07 oktober 2008 @ 17:30:
uhm, typeof van alle objecten geeft 'object'. Als je wilt weten of het een specifieke instance ergens van is gebruik je instanceof, en dat werkt bij Array net zo goed als bij eigen "classes". [1, 2, 3] instanceof Array geeft true, net als dat new Bla() instanceof Bla true geeft. En [1, 2, 3].constructor geeft ook gewoon Array.

JavaScript:

var a = new String('foo');
var b = 'foo';
alert(typeof a); // object
alert(typeof b); // string

[BarôZZa]

Verwijderd schreef op vrijdag 03 oktober 2008 @ 16:36:
Ik heb een stuk javascript geschreven, wat theoretisch gezien een aantal velden 1 voor 1 langs zou moeten lopen, en elk leeg veld vullen met een stukje tekst. Hij werkt echter niet. Het stuk code (wordt body onload aangeroepen):

JavaScript:

<script type="text/javascript">
    var dinges = new Array("voorletters", "voornaam", "achternaam", "achternaam2");
    
    var boodschap = new Array("Vul hier uw voorletters in", "Vul hier uw voornaam in", "Vul hier uw achternaam in", "Vul hier uw tweede achternaam in");

    function replaceEmpty() {
        for (i = 0; i < fields.length; i++) {
            if (document.getElementById(dinges\[i]).value == "") {
            document.getElementById(dinges\[i]).value == boodschap\[i].value
            }
        }
    }
</script>

Het probleem is dat elke keer dat ik dinges[i] of boodschap[i] aanroep, dit niet omgezet wordt in bijbehorende waarde. Help?

De fouten:
- var dinges en vervolgens fields.length
- de tweede ==
- boodschap[i].value ipv boodschap[i]

new Array en getElementById werken gewoon.


-----

Edit

Ik moet wel zeggen dat ik werkelijk geen idee heb waarom je daarvoor een Javascriptje gebruikt als je hem bij de onLoad aanroept. In dat geval kan je net zo goed gewoon het volgende doen:
<input type="text" id="voorletters" value="Vul hier uw voorletters in">

[ Voor 13% gewijzigd door BarôZZa op 07-10-2008 21:33 ]

[tonyisgaaf]

.oisyn schreef op dinsdag 07 oktober 2008 @ 17:30:
uhm, typeof van alle objecten geeft 'object'. Als je wilt weten of het een specifieke instance ergens van is gebruik je instanceof, en dat werkt bij Array net zo goed als bij eigen "classes". [1, 2, 3] instanceof Array geeft true, net als dat new Bla() instanceof Bla true geeft. En [1, 2, 3].constructor geeft ook gewoon Array.

Zeker waar, maar omdat JS van alle andere standaard aanwezige typen m.b.v. 'typeof' wel het 'juiste' type teruggeeft, kan dat m.b.t. Arrays verwarring geven (en vice versa is dat er volgens mij de reden van dat bijv. 'for...in' op een array niet altijd het verwachte resultaat geeft).
Dit tabelletje wat Crockford in een presentatie had zitten vond ik wel verhelderend:

type	typeof
object	'object'
function	'function'
array	'object'
number	'number'
string	'string'
boolean	'boolean'
null	'object'
undefined	'undefined'

En terwijl ik dit aan het typen ben zie ik dat Crisp al weer een testcase heeft gemaakt Verhelderend! Althans, de testcase, niet JS zelf

Over Crockford wil ik alleen maar zeggen dat ik het fijn vind om 'les' (Yahoo Theater) te krijgen van iemand met een mening, welke hij ook nog eens redelijk uitvoerig beargumenteerd.

[BarôZZa]

Overigens is ID gebruiken voor form elementen erg lelijk/onhandig in mijn ogen. Als je dan twee formulieren hebt met een email-input moet je ze verschillende id's gaan geven.

Maar ik heb het gevoel dat je OF erg vreemd bezig bent OF dat we een of andere suffe huiswerkopgave aan het maken zijn

[ Voor 26% gewijzigd door BarôZZa op 07-10-2008 21:42 ]

[Verwijderd]

Met prototype doe je het makkelijker.. http://www.prototypejs.org/api/array

JavaScript:

function replaceEmpty()
{
$('dinges').each(function(a) 
{   
if(a.value == '')
    boodschap[indexOf(a.value)].value = a.value;
});
}

[ Voor 7% gewijzigd door Verwijderd op 07-10-2008 22:02 ]

[Bosmonster]

BarôZZa schreef op dinsdag 07 oktober 2008 @ 21:41:
Overigens is ID gebruiken voor form elementen erg lelijk/onhandig in mijn ogen. Als je dan twee formulieren hebt met een email-input moet je ze verschillende id's gaan geven.

Maar ik heb het gevoel dat je OF erg vreemd bezig bent OF dat we een of andere suffe huiswerkopgave aan het maken zijn

ID's gebruiken voor formelementen is verplicht in strict als ik me niet vergis. Iig als je labels werkend wil hebben.

[Verwijderd]

Bosmonster schreef op dinsdag 07 oktober 2008 @ 22:24:

ID's gebruiken voor formelementen is verplicht in strict als ik me niet vergis. Iig als je labels werkend wil hebben.

Voor die labels wel ja, maar de effectieve "naam" is nog steeds het name attribuut. Formuliervelden met dezelfde naam mogen nu eenmaal meerdere keren voorkomen. Binnen een form, maar er mogen natuurlijk ook meerdere forms in één document staan.

Kortom, id's zijn nooit verplicht voor invoerelementen.

[.oisyn]

crisp schreef op dinsdag 07 oktober 2008 @ 21:23:
[...]

JavaScript:

var a = new String('foo');
var b = 'foo';
alert(typeof a); // object
alert(typeof b); // string

Ah was dat het punt, dat het voor array literals niet opging.

tonyisgaaf schreef op dinsdag 07 oktober 2008 @ 21:35:
[...]

Zeker waar, maar omdat JS van alle andere standaard aanwezige typen m.b.v. 'typeof' wel het 'juiste' type teruggeeft, kan dat m.b.t. Arrays verwarring geven (en vice versa is dat er volgens mij de reden van dat bijv. 'for...in' op een array niet altijd het verwachte resultaat geeft).

Tja, op zich kun je dat ook voor een for(i = 0; i < a.length; i++) loopje ook zeggen:

JavaScript:

a = [];
a[10000000] = 34;
a["aap"] = 542;
for (i = 0; i < a.length; i++)
    doeIets(a[i]);

Zo mis je a["aap"], en je telt voor niets van 0 tot 9999999. Aan de andere kant kun je je dan afvragen of het dan wel zinnig is om een array te gebruiken en niet een gewoon object

[ Voor 54% gewijzigd door .oisyn op 08-10-2008 00:02 ]

[Bosmonster]

Verwijderd schreef op dinsdag 07 oktober 2008 @ 22:28:
[...]

Voor die labels wel ja, maar de effectieve "naam" is nog steeds het name attribuut. Formuliervelden met dezelfde naam mogen nu eenmaal meerdere keren voorkomen. Binnen een form, maar er mogen natuurlijk ook meerdere forms in één document staan.

Kortom, id's zijn nooit verplicht voor invoerelementen.

Dan ben ik vast in de war met nieuwe specificaties.

Overigens vind ik labels zo goed als verplicht, waarmee de id's ook redelijk verplicht worden. Maar dat meer uit usability oogpunt natuurlijk, niet vanuit de specs.

[BarôZZa]

.oisyn schreef op dinsdag 07 oktober 2008 @ 23:36:

Tja, op zich kun je dat ook voor een for(i = 0; i < a.length; i++) loopje ook zeggen:

JavaScript:

a = [];
a\[10000000] = 34;
a["aap"] = 542;
for (i = 0; i < a.length; i++)
    doeIets(a\[i]);

Zo mis je a["aap"], en je telt voor niets van 0 tot 9999999. Aan de andere kant kun je je dan afvragen of het dan wel zinnig is om een array te gebruiken en niet een gewoon object

for(i=0;i<a.length;i++)
is eigenlijk ook niet de manier om het aan te pakken.

Je kan het veel gemakkelijker doen

JavaScript:

a = [];
a[3] = 34;
a["aap"] = 542; 
for (i in a)
    document.write(i+' >> '+a[i]+'<br>');

output:
3 >> 34
aap >> 542

[ Voor 13% gewijzigd door BarôZZa op 08-10-2008 14:42 ]

[.oisyn]

Lees je überhaupt? Bijvoorbeeld het stukje dat ik daarboven quootte, met name het dikgedrukte stuk?

Het nadeel van de for..in is dat je methods die je aan de prototype van Array hebt toegevoegd dan ook te zien krijgt.

[ Voor 226% gewijzigd door .oisyn op 08-10-2008 14:52 ]

[BarôZZa]

Bosmonster schreef op woensdag 08 oktober 2008 @ 09:41:
[...]


Dan ben ik vast in de war met nieuwe specificaties.

Overigens vind ik labels zo goed als verplicht, waarmee de id's ook redelijk verplicht worden. Maar dat meer uit usability oogpunt natuurlijk, niet vanuit de specs.

Dit is ook goed:

HTML:

<label>Bla:<input type="text" name="bla" /></label>

[BarôZZa]

.oisyn schreef op woensdag 08 oktober 2008 @ 14:49:
Lees je überhaupt? Bijvoorbeeld het stukje dat ik daarboven quootte, met name het dikgedrukte stuk?

Het nadeel van de for..in is dat je methods die je aan de prototype van Array hebt toegevoegd dan ook te zien krijgt.

Ai, quote niet gelezen

[crisp]

BarôZZa schreef op woensdag 08 oktober 2008 @ 14:53:
[...]

Dit is ook goed:

HTML:

<label>Bla:<input type="text" name="bla" /></label>

Ja, is inderdaad ook goed, alleen IE doet niets met de impliciete associatie...

[Bosmonster]

BarôZZa schreef op woensdag 08 oktober 2008 @ 14:53:
[...]

Dit is ook goed:

HTML:

<label>Bla:<input type="text" name="bla" /></label>

En dat vind ik nou lelijk/onhandig

edit: zie ook crisp

[ Voor 4% gewijzigd door Bosmonster op 08-10-2008 15:11 ]

[Verwijderd]

Bosmonster schreef op woensdag 08 oktober 2008 @ 09:41:

Overigens vind ik labels zo goed als verplicht, waarmee de id's ook redelijk verplicht worden. Maar dat meer uit usability oogpunt natuurlijk, niet vanuit de specs.

Daar ben ik het helemaal mee eens. In praktijk komt het er dus op neer dat zo ongeveer elk input, select en textarea element een id en een name attribuut heeft. Ik kan me er ook behoorlijk aan ergeren als ik bijvoorbeeld een radio button niet kan selecteren door op het bijbehorende label te klikken.

[_Thanatos_]

Zoals ook in de search van GoT, het labeltje "Zoek specificatie"

[crisp]

_Thanatos_ schreef op woensdag 08 oktober 2008 @ 20:22:
Zoals ook in de search van GoT, het labeltje "Zoek specificatie"

Helaas is een <img> element geen form-control, dus heeft het niet veel zin daar een <label> aan te hangen