[javascript]aantal waarden optellen en in veld invullen - Softwareontwikkeling

woensdag 6 december 2006 14:51

Acties:

Topicstarter

Ik zit met een probleempje wat waarschijnlijk redelijk simpel is, maar ik kan het nergens vinden. Ik ben bezig met javascript te leren en ik wil graag een tabel waar een gebruiker waarden in kan vullen. Hieronder moet een knop staan die de ingevoerde waarden (ze hoeven niet allemaal ingevuld te zijn) optelt en dan in een ander veld de uitkomst toont.

Ik heb nu dit:

code:

<html>
<body>
<form name="milliliters">
<table border="1" width="100%">
<tr><td width="20%"><b>Chargenummer</b></td><td><b>Preparaat</b></td><td><b>Aantal ml</b></td></tr>
<tr><td>&nbsp</td><td>NuTRIflex Lipid Basal</td><td><input type="text" name="nutriflex" size="4" maxlength="4" /></td></tr>
<tr><td>&nbsp</td><td>KCl inj. 10 ml = 20 mmol K, 20 mmol Cl</td><td><input type="text" name="kcl" size="4" maxlength="4" /></td></tr>
<tr><td>&nbsp</td><td>NaCl inj. 10 ml = 50 mmol Na, 50 mmol Cl</td><td><input type="text" name="nacl" size="4" maxlength="4" /></td></tr>
</table><br />
</form>
<form name="button">
<input type="button" name="controle" value="Controleer" />
</form>
<form name="resultaatml">
<input type="text" name="resultaat" />
</form>
<script language=javascript>
document.button.controle.onclick = function () {alert(document.milliliters.nutriflex.value + document.milliliters.kcl.value)}
</script>
</body>
</html>

Nu plaatst ie als antwoord de twee waarden in een alertbox achter elkaar. De bedoeling is dus dat ie ze optelt. Hierna moeten ze in document.resultaatml.resultaat geplaatst worden als value. (dat gaat denk ik met iets als target in de button, maar ik snap niet helemaal hoe het werkt...)
Het is volgens mij een redelijk basic iets, maar alle tutorials die ik gevonden heb met form check javascript, check sum javascript etc. op google zijn veel geavanceerder.

Ik ben al lekker aan het klooien, maar het valt me toch redelijk tegen om even te doen. Iemand die mij misschien hiermee kan helpen? Of een goede tutorial heeft?

Ik heb ook geprobeerd om met iets als x = document.milliliters.nutriflex.value en y = document.milliliters.kcl.value te werken, maar dat lukte helemaal niet (er kwam niks te staan.)
Ik had dat boven document.button.controle.onclick geplaatst binnen de <script>-tags.

[ Voor 6% gewijzigd door Paultje3181 op 06-12-2006 14:54 ]

woensdag 6 december 2006 14:56

Acties:

XWB

Devver

Strings kan je ook niet optellen, je moet de waarde naar een integer of float omzetten.

JavaScript:

1 2	alert ( parseInt( value ) ); alert ( parseFloat( value ) );

/edit :

HTML:

<html>
<head>
    <script type="text/javascript">
    function telOp ( form )
    {
        var som = 0;
        
        for ( var i = 0; i < form.elements.length; i++ )
        {
            if ( form.elements[i].type.toLowerCase() == 'text' )
            {
                som += parseInt ( form.elements[i].value );
            }
        }
        
        return alert ( som );
    }
    </script>
</head>
<body>
<form action="" method="post">
<table border="1" width="100%">
<tr><td width="20%"><b>Chargenummer</b></td><td><b>Preparaat</b></td><td><b>Aantal ml</b></td></tr>
<tr><td>&nbsp;</td><td>NuTRIflex Lipid Basal</td><td><input type="text" name="nutriflex" size="4" maxlength="4" /></td></tr>
<tr><td>&nbsp;</td><td>KCl inj. 10 ml = 20 mmol K, 20 mmol Cl</td><td><input type="text" name="kcl" size="4" maxlength="4" /></td></tr>
<tr><td>&nbsp;</td><td>NaCl inj. 10 ml = 50 mmol Na, 50 mmol Cl</td><td><input type="text" name="nacl" size="4" maxlength="4" /></td></tr>
</table><br />
<input type="button" name="controle" value="Controleer" onclick="telOp( this.form )" />
</form>
</body>
</html>

[ Voor 80% gewijzigd door XWB op 06-12-2006 15:05 ]

March of the Eagles

woensdag 6 december 2006 14:58

Acties:

Verwijderd

Waarde's even delen door 1 zodat er een getal van gemaakt wordt, nu wordt de waarde als string behandeld.

JavaScript:

1	(document.milliliters.nutriflex.value/1) + (document.milliliters.kcl.value/1)

woensdag 6 december 2006 15:20

Acties:

Paultje3181

Topicstarter

code:

<html>
<body>
<form name="milliliters">
<table border="1" width="100%">
<tr><td width="20%"><b>Chargenummer</b></td><td><b>Preparaat</b></td><td><b>Aantal ml</b></td></tr>
<tr><td>&nbsp</td><td>NuTRIflex Lipid Basal</td><td><input type="text" name="nutriflex" size="4" maxlength="4" /></td></tr>
<tr><td>&nbsp</td><td>KCl inj. 10 ml = 20 mmol K, 20 mmol Cl</td><td><input type="text" name="kcl" size="4" maxlength="4" /></td></tr>
<tr><td>&nbsp</td><td>NaCl inj. 10 ml = 50 mmol Na, 50 mmol Cl</td><td><input type="text" name="nacl" size="4" maxlength="4" /></td></tr>
</table><br />
</form>
<form name="button">
<input type="button" name="controle" value="Controleer" />
</form>
<form name="resultaatml">
<input type="text" name="resultaat" maxlength=4/>
</form>
<script language=javascript>
document.button.controle.onclick = function () 
{document.resultaatml.resultaat.value = (document.milliliters.nutriflex.value/1 + document.milliliters.kcl.value/1 + document.milliliters.nacl.value/1)}
</script>
</body>
</html>

is het nu geworden, maar als ik nu een waarde invul van 2.44 bij kcl en 3 bij nacl komt er 5.4399999995 uit. Dat is natuurlijk niet de bedoeling. Waardoor komt dit en hoe kan ik dit veranderen?

Hacku: bij jou moeten ze allemaal ingevuld zijn. Dit hoeft niet persé van mij. Dus er mogen er ook een aantal leeg zijn. Is dit ook op te lossen of moet ik gewoon een default waarde van 0 invullen?

[ Voor 7% gewijzigd door Paultje3181 op 06-12-2006 15:22 ]

woensdag 6 december 2006 15:24

Acties:

XWB

Devver

Ja, gewoon 0 als default invullen

March of the Eagles

woensdag 6 december 2006 15:30

Acties:

zwippie

Electrons at work

Dat is de afrondfout die je kan krijgen als je met floating point getallen werkt.
Hier kun je lezen hoe dat nou ongeveer zit.

In Javascript heb je de methoden toFixed en toPrecision om je resultaat toch wat 'netter' te maken, al zul je altijd zitten met afrondingsproblemen. (nog een linkje)

[ Voor 9% gewijzigd door zwippie op 06-12-2006 15:31 ]

How much can you compute with the "ultimate laptop" with 1 kg of mass and 1 liter of volume? Answer: not more than 10^51 operations per second on not more than 10^32 bits.