Beginnersvraag javascript

[Kenneth]

op voorhand mijn excuses voor de domme vraag. Heb gehoeheld maar blijkbaar niet de juiste termen gebruikt

Het is een simpel probleem maar toch ...

het gaat over het gebruik van de waarde van een variabel in bijvoorbeeld .getElementById

Met getElementById (niet letten op hoofdlettergebruik) kan je de waarde opvragen van iets op je pagina, bijvoorbeeld een textbox.
Nu wil ik de waardes opvragen van textbox 1 (vakje1) t.e.m. textbox10 (vakje10)

dus in een loop krijg je dan iets als

..... getElementById("vakje" + teller)

maar blijkbaar is dit te simpel gedacht.

ook al geprobeerd:

tussenstap = "vakje"+teller
.... getelementbyid(tussenstap)

Heb al een variant of tien geprobeerd maar niets lukt. Het kan niet anders dan mogelijk zijn

[brechtb]

Eventjes getest, dit werkt dus wel...

Code: Selecteer alles

<script type="text/javascript">
    function checkTextBoxes() {

        for (var i = 0; i < 5; i++) {
        
            var textField = document.getElementById('Text' + i);

            alert(textField.value);

        }
        
    }
</script>
--------------------
<input type='text' id='Text0' />
<input type='text' id='Text1' />
<input type='text' id='Text2' />
<input type='text' id='Text3' />

<input type='button' onclick='checkTextBoxes()' value='Form Checker' />

Wat krijg je als error?

[Kenneth]

Zal het vanavond nog eens proberen om de exacte fout te weten.

Is met Firebug dat ik iets krijg van "... undefined" met ... dan wat ik tussen haakjes probeer

[Ofloo]

jij hebt waarschijnlijk " gebruikt ipv '

[Kenneth]

Probleem kwam eigenlijk omdat Firefox blijkbaar de pagina niet volledig herlaadt. Ik start nu Firefox op en nu werkt het wel. Ben daar achter gekomen toen ik een nieuwe functie wou maken bij onchange ="functie()" Ik merkte opeens dat in de html in firebug de oude functienaam bleef staan. Firefox heropgestart en de nieuwe versie werd gebruikt.

Heb wel nog een probleem met variabelen maar dan met een array.

Code: Selecteer alles

					<td>
						<select id="Soort1" name="Soort1" onchange="controle()">
						<option value="None">Selecteer</option>
						<option value="Vlees">Vlees</option>
						<option value="Gevogelte">Gevogelte</option>
						<option value="Vis">Vis</option>
						<option value="Veggy">Vegetarisch</option>	
						</select>
					</td>

					<td>
						<select id="Beleg1" name="Beleg1" >

						</select>
					</td>

Code: Selecteer alles

var Vlees = new Array();
Vlees[0]="Preparé";
Vlees[1]="Hesp";
Vlees[2]="Kippewit";
Vlees[3]="Hesp & Kaas";
Vlees[4]="Salami";
Vlees[5]="Salami & Kaas";
Vlees[6]="Hoofdvlees";
Vlees[7]="Vleessalade";
Vlees[8]="Kip Curry";

function controle()
{
var Formulier = document.forms["Broodjes"];

for (var teller = 1; teller <= 10;teller++)
	{
	var Soort = Formulier.elements["Soort"+teller].value;
	var select = document.getElementById("Beleg"+teller);
	
	if (Soort == "None")
		{
			// kolom2 op nul zetten
			
			select.options.length = 0;
			select.disabled= true;
		}
	else
		{	//kolom2 vullen
			select.disabled=false;
			for(index in .....) <------------ hier moet dus de verwijzing komen naar de array
			{
			    select.options[select.options.length] = new Option(......[index], index); <----- verwijzing array
			}
		}
	}

}

De situatie: twee dropdown boxen. Tweede is uitgeschakeld. Het gaat om broodjes. In het eerste vakje selecteer je het soort (vlees, gevogelte, ...). Afhankelijk van de keuze wordt de tweede dropdown gevuld met waarden uit een array met dezelfde benaming als de keuze in het eerste veld. Wordt er "Vlees" geselecteerd in eerste dropdown, dan wordt de tweede dropdown gevuld met de waarden uit de array Vlees.

Zet ik in de plaats van de puntjes gewoon Soort, dan wordt alles gevuld met de letters van het woord Soort.

[brechtb]

Ik denk niet dat er een verschil is tss ' ' en " ". Het zou kunnen, ik weet het niet...

Wat ik niet begrijp aan je laatste code, waarom gebruik je die eerste for-lus? Zijn er 10 rijen van 2 comboboxen?

Enfin, ik stel voor dat je een switch gebruikt, aan de hand van de geselecteerde waarde wordt de respectievelijke array gebruikt. Deze code is getest in IE, maar niet in FF, aangezien ik op het werk geen FF heb...

Code: Selecteer alles

<script language="javascript" type="text/javascript">

    var Vlees = new Array();
    Vlees[0] = "Preparé";
    Vlees[1] = "Hesp";
    Vlees[2] = "Kippewit";
    Vlees[3] = "Hesp & Kaas";
    Vlees[4] = "Salami";
    Vlees[5] = "Salami & Kaas";
    Vlees[6] = "Hoofdvlees";
    Vlees[7] = "Vleessalade";
    Vlees[8] = "Kip Curry";

    var Gevogelte = new Array();
    Gevogelte[0] = "Kip";
    Gevogelte[1] = "Duif";
   
    function controle() {   

        var form = document.forms["Broodjes"];

        var type = form.elements["Soort1"].value;

        var select = form.elements["Beleg1"];

        if (type == "None") {
            select.options.length = 0;
            select.disabled = true;
        }
        else {
            select.options.length = 0;
            select.disabled = false;

            var tempArray = new Array();

            switch (type) {
                case "Vlees": tempArray = Vlees; break;
                case "Gevogelte": tempArray = Gevogelte; break;
            }

            for (index in tempArray) {
                select.options[select.length] = new Option(tempArray[index], tempArray[index]);
            }
        }
    }
</script>

<body>
    <form id="Broodjes" action="HTMLPage1.htm">
    <table>
        <tr>
            <td>
                <select id="Soort1" name="Soort1" onchange="controle()">
                    <option value="None">Selecteer</option>
                    <option value="Vlees">Vlees</option>
                    <option value="Gevogelte">Gevogelte</option>
                    <option value="Vis">Vis</option>
                    <option value="Veggy">Vegetarisch</option>
                </select>
            </td>
            <td>
                <select id="Beleg1" name="Beleg1">

                </select>
            </td>
        </tr>
    </table>
    </form>
</body>

*edit*: vergeet niet je tweede dropdown leeg te maken telkens als je in de eerste iets selecteert

[Kenneth]

Er zijn inderdaad tien lijnen met (voor die voorbeeld) 2 boxen.

Had ook al gedacht om met een tijdelijke array te werken maar dacht dat er misschien nog een andere manier was. Daarom dat ik de namen van de arrays hetzelfde hield als de mogelijkheden in de eerste box. Kan me bijna niet voorstellen dat het niet mogelijk is om de waarde van de eerste box te gebruiken als naam van de array. Maar ja, is nu ook niet de bedoeling om het enorm ingewikkeld te maken. Moet gewoon klein beetje efficiënt zijn.

Is eigenlijk begonnen als weddenschap. Vrienden van mij hadden een bestelformulier "besteld" bij een programmeur. Toen ik de code zag, stonden daar duizenden lijnen. Waar ik werk met die functie controle() en for-loop, werkte die programmeur met controle1(), controle2(), ... Tja, dan is het niet echt moeilijk om een indrukwekkende hoeveelheid lijnen te typen. Ik heb dan maar de weddenschap opgezet dat ik hetzelfde kon doen in minder dan de helft van de lijnen (wat niet echt moeilijk is). Brouwerij Moortgat zal weer content zijn. En ondertussen leer ik beetje javascript

[ubremoved_539]

Ik heb dan maar de weddenschap opgezet dat ik hetzelfde kon doen in minder dan de helft van de lijnen (wat niet echt moeilijk is).

Weinig (cryptische) code is niet altijd een synoniem voor betere code !

[brechtb]

Tja, maar aangezien het javascript is, en dus moet worden gedownload is het wel aangeraden om de code zo kort mogelijk te houden.

Ik ken er zelf te weinig van, maar ik veronderstel dat het wel mogelijk is om dit nog korter te doen. Ik denk echter dat het wel niet mogelijk is om via een waarde van een dropdown een naam van een variabele te zoeken in de code en die variabele dan te gebruiken...

Wat je wel zou kunnen doen is een multi dimension array gebruiken met alle waarden van beleg erin, dan kan je bvb beleg[0] = ["Salami", "Hesp", ...] waarbij beleg[0][1] de waarde "Hesp" geeft.

Dan hoef je niet meer te kijken naar de waarde van de eerste dropdown, gewoon de index gebruiken (vb beleg[x]). De code wordt dan wel wat onleesbaar...

*edit* {} vervangen door [] bij de literal array (javascript =/= C#)

*edit2* opvolging eerste edit, om je code korter te maken zou je dus gewoon hetvolgende kunnen doen:

Code: Selecteer alles

var Vlees = ["Preparé", "Hesp", "Kippewit", "Hesp & Kaas", "Salami", "Hoofdvlees", "Vleessalade", "Kip Curry"];

ipv

 var Vlees = new Array();
    Vlees[0] = "Preparé";
    Vlees[1] = "Hesp";
    Vlees[2] = "Kippewit";
    Vlees[3] = "Hesp & Kaas";
    Vlees[4] = "Salami";
    Vlees[5] = "Salami & Kaas";
    Vlees[6] = "Hoofdvlees";
    Vlees[7] = "Vleessalade";
    Vlees[8] = "Kip Curry";

[Kenneth]

Weinig (cryptische) code is niet altijd een synoniem voor betere code !

Overschot van gelijk !! Maar controle1(), controle2(),controle3() ... controle10() door een loop vervangen, kan moeilijk beschouwd worden als een verslechtering. Willen ze opeens 15 lijnen op hun formulier, dan bespaart het op deze manier toch een hoop knip en plak werk. Ik weet eigenlijk al dat gewoon door het vervangen van de 10 verschillende functies door één loop, dat ik weddenschap al heb gewonnen. In totaal zijn er zo een vijftal reeksen van telkens tien functies. Vijftig verschillende functies vervangen door vijf loops kan enkel maar goed zijn. Maar aangezien het meer een oefening voor mij is, wil ik gewoon eens zien hoe ver ik kan gaan voor ik zelf de draad kwijt ben. In Notepad++ staan bijna evenveel groene lijntjes (commentaar) als regels code

@ brechtb:

eerst en vooral bedankt voor de hulp. Het gebruik van die array ging nog aangepast worden maar voorlopig zet ik mooi alles onder mekaar om iets meer structuur te hebben voor mezelf. Ben van plan om multi dimension array te gebruiken maar dan eigenlijk beperkt tot omschrijving en prijs. Zal eens moeten nadenken of ik alles in één array krijg. Weet niet of het erg bevordelijk is voor de leesbaarheid van de code.

[brechtb]

Ja, nu begrijp ik waar je naartoe wil!!

Let op met die for loop, je kan die controle1(), controle2(), enz... toch gewoon vervangen door één methode zélfs zonder loop, nl door het doorgeven van parameters. Volgende code gaat ook (natuurlijk als alle dropdowns dezelfde waarden hebben, anders moet je deze code nog aanpassen)

Stel:

Code: Selecteer alles

<script language="javascript" type="text/javascript">

    var Vlees = ["Preparé", "Hesp", "Kippewit", "Hesp & Kaas", "Salami", "Hoofdvlees", "Vleessalade", "Kip Curry"];

    var Gevogelte = new Array();
    Gevogelte[0] = "Kip";
    Gevogelte[1] = "Duif";
   
    function controle(idFirstDropDown, idSecondDropDown) {   

        var form = document.forms["Broodjes"];

        var type = form.elements[idFirstDropDown].value;

        var select = form.elements[idSecondDropDown];

        if (type == "None") {
            select.options.length = 0;
            select.disabled = true;
        }
        else {
            select.options.length = 0;
            select.disabled = false;

            var tempArray = new Array();

            switch (type) {
                case "Vlees": tempArray = Vlees; break;
                case "Gevogelte": tempArray = Gevogelte; break;
            }

            for (index in tempArray) {
                select.options[select.length] = new Option(tempArray[index], tempArray[index]);
            }
        }
    }

</script>

<form id="Broodjes" action="HTMLPage1.htm">
    <table>
        <tr>
            <td>
                <select id="Soort1" name="Soort1" onchange="controle('Soort1', 'Beleg1')">
                    <option value="None">Selecteer</option>
                    <option value="Vlees">Vlees</option>
                    <option value="Gevogelte">Gevogelte</option>
                    <option value="Vis">Vis</option>
                    <option value="Veggy">Vegetarisch</option>
                </select>
            </td>
            <td>
                <select id="Beleg1" name="Beleg1">

                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select id="Soort2" name="Soort2" onchange="controle('Soort2', 'Beleg2')">
                    <option value="None">Selecteer</option>
                    <option value="Vlees">Vlees</option>
                    <option value="Gevogelte">Gevogelte</option>
                    <option value="Vis">Vis</option>
                    <option value="Veggy">Vegetarisch</option>
                </select>
            </td>
            <td>
                <select id="Beleg2" name="Beleg2">

                </select>
            </td>
        </tr>
    </table>
</form>

Het voordeel is dat deze oplossing wat sneller zal werken (irl zal je dit niet eens merken).

[meon]

jQuery is geen optie hier? (write less, do more)

[Kenneth]

Heb daar aan gedacht aan het doorgeven van parameters maar om eerlijk te zijn, weet ik niet meer waarom ik dat dan niet gedaan heb

Het is ook de bedoeling dat per lijn op het einde een subtotaal komt en dan onderaan het totaal. Nu doe ik dit door, bij iedere verandering, alles te overlopen. Dus in totaal 10 rijen met drie dropdown en een zestal checkboxen (ingekort om te dienen als voorbeeld in mijn vraag). Ik denk dat ik dan afgestapt ben van het parameter idee omdat ik er op dat moment niet aan uit geraakte. Heb een verleden van programmeren in Visual Basic .net maar is ondertussen al een jaar of drie geleden dat ik nog iets gemaakt heb. En de combinatie met eerste stappen in javascript hebben ervoor gezorgd dat ik gewoon bij iedere verandering alles overloop om te berekenen.

jQuery is zeker een optie. Maar als ik mij niet vergis, is jQuery eigenlijk gebaseerd op javascript (librairies). Dus wou ik even beginnen met de basis. En denk dat het opzoeken van de juiste jQuery zaken meer tijd en moeite zou kosten dan javascript. Vind jQuery iets prachtig en ik hoop dat ik er de tijd voor kan vrijmaken om mij daarmee bezig te houden maar denk dat, voor dit geval, de leercurve te steil zou zijn voor wat het maar moet zijn. Hopelijk klinkt het beetje logisch wat ik probeer te zeggen