problemen met javascript form

[Profdumbledore]

Hallo allemaal
voor school moet ik een site met een form maken deze form moet de aangevinkte value's bijelkaar optellen en de waarde daarvan in een alert zetten. ik heb het form en de functie al maar de berekening wilt niet lukken...
wilt iemand daar een voorbeeldje van sturen ik ben al een hele tijd hiermee bezig maar het wilt niet werken in de alert komt het getal van de aangevinkte hokjes te staan maar van de niet aangevinkte hokjes komt er undentified te staan... hoe kan ik dat oplossen
(kort samengevat de functie telt de value's niet goed op en zegt undentified als de value van niet aangevinkte hokjes)

alvast bedankt
ps: ik kan mijn code niet hierop plaatsten omdat hij dan waarschijnlijk als plagiaat wordt aangegeven als ik hem inlever.

[endness]

Zonder code komen we echt niet ver... Kun je niet het gedeelte van de code hier neerzetten waarvan jij denkt dat het niet goed is?

[ Voor 19% gewijzigd door endness op 23-02-2017 20:02 ]

[q-enf0rcer.1]

Werk je met een for loop om alle waarden op te tellen? Dan zou je iets zoals dit kunnen doen:

code:

var dummyArray = [1,2,3,undefined,4,5,6];
var total = 0;
for(var value of dummyArray){
    if (typeof value != 'undefined'){
        total += value;
    }
}
alert(total);

[ Voor 10% gewijzigd door q-enf0rcer.1 op 23-02-2017 20:04 ]

[Profdumbledore]

hier is een stukje van de code..
if (document.mijnForm.vocht1.checked) {
var vocht1=document.mijnForm.vocht1.value;
} else if (document.mijnForm.vocht2.checked) {
var vocht2=document.mijnForm.vocht2.value;
} else {
var vocht3=document.mijnForm.vocht3.value;
}
var resultaat=groentefruit1+groentefruit2+groentefruit3+broodpasta1+broodpasta2+broodpasta3+zuivelvlees1+zuivelvlees2+zuivelvlees3+vetolie1+vetolie2+vetolie3+vocht1+vocht2+vocht3;
alert(mijnTekst + resultaat);

zoals je ziet hebben we geen loop...

[q-enf0rcer.1]

Dat kun je zo oplossen:

code:

var checkboxes = document.querySelectorAll('[type=checkbox]'); // stop alle checkboxes in een nodeList(hier kunnen we overheen loopen alsof het een array is)
var total = 0;
for(var checkbox of checkboxes){ // loop over alle checkboxes
    if (typeof checkbox.value != 'undefined' && checkbox.checked === true){ // kijk voor de zekerheid of de waarde niet undefined is(maar zou eigenlijk niet mogelijk moeten zijn), en check of de checkbox checked is
        total +=  Number(checkbox.value); // tel de waarden op
    }
}
console.log(total); // log de waarden

Wil je goede browser support dan moet je wel de for...of loop inruilen, zie extra info hier:
https://developer.mozilla.org/nl/docs/Web/API/NodeList

Edit: zie net dat ik het probleem niet goed begreep

In plaats van vocht1,vocht2 en vocht3 moet je maar 1 var genaamd vocht gebruiken.

code:

var vocht;
if (document.mijnForm.vocht1.checked) {
vocht=document.mijnForm.vocht1.value;
} else if (document.mijnForm.vocht2.checked) {
vocht=document.mijnForm.vocht2.value;
} else {
vocht=document.mijnForm.vocht3.value;
}
var resultaat=groentefruit1+groentefruit2+groentefruit3+broodpasta1+broodpasta2+broodpasta3+zuivelvlees1+zuivelvlees2+zuivelvlees3+vetolie1+vetolie2+vetolie3+vocht;
alert(mijnTekst + resultaat);

[ Voor 79% gewijzigd door q-enf0rcer.1 op 23-02-2017 21:55 ]

[Profdumbledore]

q-enf0rcer.1 schreef op donderdag 23 februari 2017 @ 21:44:


In plaats van vocht1,vocht2 en vocht3 moet je maar 1 var genaamd vocht gebruiken.

code:

var vocht;
if (document.mijnForm.vocht1.checked) {
vocht=document.mijnForm.vocht1.value;
} else if (document.mijnForm.vocht2.checked) {
vocht=document.mijnForm.vocht2.value;
} else {
vocht=document.mijnForm.vocht3.value;
}
var resultaat=groentefruit1+groentefruit2+groentefruit3+broodpasta1+broodpasta2+broodpasta3+zuivelvlees1+zuivelvlees2+zuivelvlees3+vetolie1+vetolie2+vetolie3+vocht;
alert(mijnTekst + resultaat);

THX!! hij doet het nu (soort van)
nu je het zo zegt is het eigenlijk best logisch
het enige wat nog niet werkt is dat hij var resultaat niet optelt maar achterelkaar zet hoe kan dat?

[Teknix1982]

Omdat javascript de waarden van de variabelen als strings ziet, je moet de waarden parsen naar getallen, dan tellen ze wel op.

[Profdumbledore]

Teknix1982 schreef op donderdag 23 februari 2017 @ 22:41:
Omdat javascript de waarden van de variabelen als strings ziet, je moet de waarden parsen naar getallen, dan tellen ze wel op.

hoe?

[Teknix1982]

Google maar is op javascript parse string as number stackoverflow helpt je verder.

[Profdumbledore]

Teknix1982 schreef op donderdag 23 februari 2017 @ 22:43:
Google maar is op javascript parse string as number stackoverflow helpt je verder.

okidoki dankje!

[Profdumbledore]

Teknix1982 schreef op donderdag 23 februari 2017 @ 22:43:
Google maar is op javascript parse string as number stackoverflow helpt je verder.

Ik kom er niet uit hij wilt niet werken?
Hoe doe je het precies?

[Verwijderd]

Waar heb je gekeken en wat snap je precies niet?
Je krijgt redelijk concrete voorbeelden en daarna een goede hint om te rekenen met integers i.p.v. strings.

Het is ook handig om de aangepaste code nog te laten zien. Dan kunnen we zien wat er fout gaat en eventueel wat tips geven.

Je kan de functie parseInt gebruiken, hoe je dat doet mag jezelf uitzoeken.

[Profdumbledore]

Verwijderd schreef op vrijdag 24 februari 2017 @ 15:17:
Waar heb je gekeken en wat snap je precies niet?
Je krijgt redelijk concrete voorbeelden en daarna een goede hint om te rekenen met integers i.p.v. strings.

Het is ook handig om de aangepaste code nog te laten zien. Dan kunnen we zien wat er fout gaat en eventueel wat tips geven.

Je kan de functie parseInt gebruiken, hoe je dat doet mag jezelf uitzoeken.

Thx maar ik heb echt net het voorelkaar gekregen
dus hij werkt nu helemaal
bedankt voor alle hulp!