[Javascript] Functie vaak gebruiken

[MiKeZZa]

Ik heb een functie gemaakt:

function optellen()
{
var a = document.form1.ziek.value.replace(',','.');
var b = document.form1.vakantie.value.replace(',','.');
var c = document.form1.opleiding.value.replace(',','.');
var d = document.form1.intern_overleg.value.replace(',','.');
var e = document.form1.feestdag.value.replace(',','.');
var f = document.form1.overig1.value.replace(',','.');
var g = document.form1.overig2.value.replace(',','.');
var h = document.form1.overig3.value.replace(',','.');
var i = document.form1.overig4.value.replace(',','.');
var j = (1*a + 1*b + 1*c + 1*d + 1*e + 1*f + 1*g + 1*h + 1*i);
document.form1.totaaluren6.value = j;
}


Maar nu heb ik een rijtje invoervelden dat heet:
ziek, vakantie, opleiding, intern_overleg, feestdag, overig1,overig2,overig3,overig4

Maar dat is slechts 1 rij, er komen 7 rijen naast elkaar, dus 7x ziek en 7x vakantie enz.

Is er een nettere manier om dit netjes langs te lopen dan die functie nog 6x te plakken en hem een andere naam te geven (zoals optellen1 enz)

[NMe]

De container meegeven aan de functie, en dan met een loopje alle elementen daarin aflopen en optellen. Je optelfunctie is dan hooguit een regel of 5 lang, als je het goed opbouwt.

[MiKeZZa]

-NMe- schreef op donderdag 19 april 2007 @ 10:10:
De container meegeven aan de functie, en dan met een loopje alle elementen daarin aflopen en optellen. Je optelfunctie is dan hooguit een regel of 5 lang, als je het goed opbouwt.

Wow, dit gaat me iets boven de pet

[BasieP]

waarom zou je de functie 7 keer kopieren? je kan toch array's gebruiken? geef als argument aan je functie een form mee, maar 7 forms in je html en klaar

trouwens, even los van je vraag:
waarom doe je in godesnaam de hele tijd 1*a + 1* b etc.?
je kan in JS gewoon casten naar een integer hoor, dit hoef je niet zo ranzig te doen

[MiKeZZa]

BasieP schreef op donderdag 19 april 2007 @ 10:13:
waarom zou je de functie 7 keer kopieren? je kan toch array's gebruiken? geef als argument aan je functie een form mee, maar 7 forms in je html en klaar

trouwens, even los van je vraag:
waarom doe je in godesnaam de hele tijd 1*a + 1* b etc.?
je kan in JS gewoon casten naar een integer hoor, dit hoef je niet zo ranzig te doen

Ik heb nu bijvoorbeeld dit:

code:

                            <td width="61" align="left">
                                <div align="left">
                                    
                                        <font face="Verdana" size="2">Ziek</font></div>
                            </td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek0" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek1" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek2" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek3" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek4" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="ziek5" size="5" onChange="optellen()"></font></td>
                            </form>
                        </tr>

<tr>
                            <td width="61" align="left">
                                <div align="left">
                                    
                                        <font face="Verdana" size="2">Vakantie</font></div>
                            </td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie0" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie1" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie2" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie3" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie4" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="vakantie5" size="5" onChange="optellen()"></font></td>
                        </tr>

<tr>
                            <td width="61" align="left">
                                <div align="left">
                                    
                                        <font face="Verdana" size="2">Opleiding</font></div>
                            </td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding0" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding1" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding2" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding3" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding4" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="opleiding5" size="5" onChange="optellen()"></font></td>
                        </tr>
                        
                        <tr>
                            <td width="61" align="left">
                                <div align="left">
                                    
                                        <font face="Verdana" size="2">Intern overleg</font></div>
                            </td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg0" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg1" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg2" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg3" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg4" size="5" onChange="optellen()"></font></td>
                            <td width="6%"><font face="Verdana">
                            <input type="text" name="intern_overleg5" size="5" onChange="optellen()"></font></td>
                        </tr>

Maar hoe maak je hier dan losse forms in?

Want opleiding hoort bij intern_overleg en opleiding4 hoort bij intern_overleg4 enz.

Sorry dat ik zulke lastige vragen stel maar snap het nog niet helemaal

[BasieP]

doe anders even [code=html] enzo tags gebruiken, want dit leest echt gewoon niet..
lees dit eens door:
http://jennifermadden.com/javascript/loopForms.html

op google is er nog meer over te vinden

verder kan je wel losse forms gebruiken (al is dat niet per see nodig) maar dan wordt het submitten van data wat lastiger (als je alles wilt submitten dan)
in dat geval wil je dus 1 form houden, en daarin (dmv array's) een aantal niveau's

ow en while your at it:
kijk eens naar CSS. hiermee hoef je niet die ranzige font tags te gebruiken.. maakt alles een stuk overzichtelijker

[ Voor 98% gewijzigd door BasieP op 19-04-2007 10:43 ]

[MiKeZZa]

Bij deze

[MiKeZZa]

Bedankt voor de gedane moeite maar hier ga ik nooit van mijn leven uitkomen, dit is echt heel ingewikkeld denk ik. Zeker aangezien ik 21 verschillende dingen op wil tellen ga ik hier nooit uit komen vrees ik.

[RobIII]

MiKeZZa schreef op donderdag 19 april 2007 @ 10:49:
Bedankt voor de gedane moeite maar hier ga ik nooit van mijn leven uitkomen, dit is echt heel ingewikkeld denk ik. Zeker aangezien ik 21 verschillende dingen op wil tellen ga ik hier nooit uit komen vrees ik.

Het is toch écht geen rocket science en gewoon (relatief) basic javascriptwerk.
Als je aan het 'vissen' bent naar een kant-en-klare voorgekauwde oplossing dan moet ik je teleurstellen, daar doen we hier niet aan. Ik adviseer je om even één of een paar goede tutorials door te nemen en je er dan nog eens aan te wagen; hier moet je prima uit kunnen komen.

[ Voor 11% gewijzigd door RobIII op 19-04-2007 11:14 ]

[Verwijderd]

Het mooie van een loop is dat het niet uitmaakt of je 2 of 2000 zaken op wilt tellen. De JS loopt gewoon door alle elementen (hoeveel of weinig het er ook zijn) en doet z'n ding

[MiKeZZa]

Ja, dat snap ik!

Daar is het een loop voor.

Maar het probleem is niet dat ik veel zaken moet optellen maar dat ik veel uitkomsten moet krijgen. Ik moet namelijk 21 verschillende uitkomsten krijgen (die allemaal weer bestaan uit losse optellingen)

[NMe]

Zet de inputvelden waar je de som van wil hebben allemaal in eenzelfde container. Dat kan een array zijn, of je maakt ze onderdeel van een div waarbij je door alle elementen heen loopt, dat maakt niet echt uit. Je moet in elk geval in je loop dus die elementen doorlopen, de zaak daarin optellen en uiteindelijk heb je de uitkomst van één groepje. Vervolgens doe je met die uitkomst wat je wil; je kan hem laten returnen door je functie of je geeft aan je functie de plek mee waar hij moet komen te staan zodat je het in de functie kan afhandelen. Vervolgens roep je die ene functie 7 keer (of zovaak als je groepen hebt) aan.

[BasieP]

MiKeZZa schreef op donderdag 19 april 2007 @ 11:27:
Ja, dat snap ik!

Daar is het een loop voor.

Maar het probleem is niet dat ik veel zaken moet optellen maar dat ik veel uitkomsten moet krijgen. Ik moet namelijk 21 verschillende uitkomsten krijgen (die allemaal weer bestaan uit losse optellingen)

oke, wat ik nu heb begrepen is dat je zoiets hebt:

ziek[0]	ziek[1]	...	ziek[6]
vakantie[0]	vakantie[1]	...	vakantie[6]
opleiding[0]	opleiding[1]	...	opleiding[6]
...	...	...	...
overig4[0]	overig4[1]	...	overig4[6]

dit kan allemaal binnen 1 form.
Vervolgens kan je een loopje maken die door je array's heen loopt, en alle ziek[0] bij vakantie[0] bij opleiding[0] etc. optelt.

dit kan echter alleen als je alleen van boven naar beneden wilt optellen.
Als je ook anders wilt, moet je je functie ombouwen, zodat hij dit ook kan.
Dan kan je bijv. ziek[0] bij ziek[1] bij ziek[2] etc. optellen.

mochten de velden nog algemener moeten kan je ze ook gewoon twee dimentionaal maken, dus vak[0][0], of vak[6][4]

[MiKeZZa]

Wat je daar laat zien is goed Basie, ik zal er eens mee aan de gang gaan de komende dagen en dan kom ik er ongetwijfeld op terug

[MiKeZZa]

Ik heb nu alle velden hernoemd en het ziet er nu inderdaad zo uit:

ziek[0]	ziek[1]	ziek[2]	ziek[3]	ziek[4]	ziek[5]	ziek[6]
vakantie[0]	vakantie[1]	vakantie[2]	vakantie[3]	vakantie[4]	vakantie[5]	vakantie[6]
overig1[0]	overig1[1]	overig1[2]	overig1[3]	overig1[4]	overig1[5]	overig1[6]
overig2[0]	overig2[1]	overig2[2]	overig2[3]	overig2[4]	overig2[5]	overig2[6]

Enzovoorts.

Maar nu heb ik dus voor zover ik het weet 7 arrays ([0] tot en met [6]) en een functie:

function optellen()
{
var a = document.form1.ziek.value.replace(',','.');
var b = document.form1.vakantie.value.replace(',','.');
var c = document.form1.opleiding.value.replace(',','.');
var d = document.form1.intern_overleg.value.replace(',','.');
var e = document.form1.feestdag.value.replace(',','.');
var f = document.form1.overig1.value.replace(',','.');
var g = document.form1.overig2.value.replace(',','.');
var h = document.form1.overig3.value.replace(',','.');
var i = document.form1.overig4.value.replace(',','.');
var j = (1*a + 1*b + 1*c + 1*d + 1*e + 1*f + 1*g + 1*h + 1*i);
document.form1.totaaluren6.value = j;
}
//-->
</script>

Nu vraag ik me af of deze functie nog helemaal ok is, lijkt me niet. Hij verwijst naar waarden die nu niet meer bestaan en ik moet ook die array nog langs lopen op 1 of andere manier (lijkt me iets van):

for ( var i = 0; i <= inhoud array; i++ )
{
doe iets
}

Maar meer kan ik niet vinden.

Het is echt niet dat ik te beroerd ben om te zoeken maar ik hoop dat iemand me even een zetje in de rug wil geven.

[NMe]

Als je niet te beroerd bent om te zoeken, dan wordt het tijd dat je dat gaat doen. [google=javascript loops arrays tutorial] geeft je alle informatie die je nodig hebt om door je array heen te kunnen lopen. Hier moet je echt wel zelf uit kunnen komen verder, en als dat niet lukt, dan lukt dat ook niet met onze hulp maar alleen als je een boek aanschaft of tutorial en er de tijd voor neemt om het te leren. Dit topic gaat in elk geval dicht.