meerdere variabelen uit formuliervelden

[koalabreda]

Dag forumgangers,

Ik heb zeer weinig verstand van javascript dus heb even jullie hulp nodig. Ik wil graag een oppervlakte uitrekenen door: (breedte A * lengte A) - (breedte B * lengte B) zodat er het oppervlak van een vierkant met uitkeping uitgerekend kan worden.
Echter moet het ook mogelijk zijn om breedte en lengte B op 0 te houden zodat alleen een vierkant uitgerekend wordt.

De gegevens (lengtes en breedtes) moeten worden ingevoerd in een formulier veld waarna de uitkomst (oppervlakte) in een formulierveld weergegeven wordt.

Dit is wat ik gemaakt heb na wat speurwerk op internet maar zoals ik al zij, ik heb er weinig verstand van:
[JS]<script type="text/javascript">
function opperlakte() {
var waarde;
waarde = (document.all.lengte_a.value * document.all.breedte_a.value)-(document.all.lengte_b.value * document.all.breedte_b.value);
document.all.oppervlak.value = waarde;
}
</script>[/JS]

Als iemand mij zou kunnen helpen zou dit heel fijn zijn!


alvast bedankt

 

[NielsDesmet]

Die functie ziet er goed uit, behalve dat je het "opperlakte" genoemd hebt. Hij kan ook wat kleiner worden gemaakt:
[js]
function oppervlakte() {
document.all.oppervlak.value = (parseFloat(document.all.lengte_a.value) * parseFloat(document.all.breedte_a.value))-(parseFloat(document.all.lengte_b.value) * parseFloat(document.all.breedte_b.value));
}
[/js]

Nu moet je juist nog voor een knop zorgen die die functie zal uitvoeren. Dus voeg dit even toe aan je formulier:

<input type="button" value="Bereken" onclick="oppervlakte()">

... en dat zal het zo ongeveer zijn denk ik.


EDIT: Ohja, je moet ook nog een parseFloat() uitvoeren op de waarden in de berekening (dat converteert tekst naar nummers). Anders zal hij proberen rekenen met tekst.

 

[koalabreda]

Haha, bedankt.. Typefouten blijven lastig bij zulke dingen..

Nog een vraagje, is het mogelijk dat het uitgerekend wordt ZONDER dat er op een button gedrukt hoeft te worden?

Nog een probleem, het werkt alleen in internet explorer maar in in firefox of chrome... Waarom is dit? :S

 

[NielsDesmet]

Hmm... tja, nu ik er over nadenk meen ik mij te herinneren dat document.all enkel bestaat in IE.
Dit is echter niet moeilijk op te lossen. Geef gewoon je form een name-attribuut (<form name="formnaam"...) en verander de formule

document.all.elementnaam.value

naar

document.forms.formnaam.elementnaam.value

Dat zou moeten compatibel zijn met alle browsers.


Als je een formulier zonder een knop wilt, kan je een event toevoegen aan de tekstvelden erin, zoals onkeyup.
Voorbeeld:

<input name="elementnaam" onkeyup="oppervlakte()">

Op die manier wordt de functie uitgevoerd telkens de gebruiker iets intypt in een veldje. Hou er wel rekening mee dat als 1 van de velden nog niet ingevuld is, dat je dan als resultaat "NaN" zal krijgen.
Dit kan je oplossen door je functie te zeggen dat hij enkel mag beginnen rekenen als alles ingevuld is. Ik zal het voor het gemak even plakken:
[js]
function oppervlakte() {
if(document.forms.formnaam.lengte_a.value != "" && document.forms.formnaam.breedte_a.value != "" && document.forms.formnaam.lengte_b.value != "" && document.forms.formnaam.breedte_b.value != "")
{
document.forms.formnaam.oppervlak.value = (parseFloat(document.forms.formnaam.lengte_a.value) * parseFloat(document.forms.formnaam.breedte_a.value))-(parseFloat(document.forms.formnaam.lengte_b.value) * parseFloat(document.forms.formnaam.breedte_b.value));
}
}
[/js]

 

[koalabreda]

Ga er mee aan de slag!

Super bedankt voor de hulp