OWN #197 - HTML-cursus

In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.

1. <script type="text/javascript">
2. function cent(amount) {
3. 	return (amount == Math.floor(amount)) ? amount + ',00' : (  (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
4. }
5. 
6. function update(form) {
7. 	if (document.getElementById) {
8. 		hoeveelheid=document.getElementById("quantity")
9. 		eenheid=document.getElementById("unitcost")
10. 		sub=document.getElementById("subtotal")
11. 		btw=document.getElementById("tax")
12. 		totaal=document.getElementById("total")
13. 		var subtotal = (hoeveelheid.value - 0) * (eenheid.value - 0);
14. 		subtotal = Math.floor(subtotal * 1000)/1000;
15. 		sub.value = '€' + cent(subtotal);
16. 		var tax = subtotal / 100 * (form.rate.value - 0);
17. 		tax = Math.floor(tax * 1000)/1000;
18. 		btw.value = '€' + cent(tax);
19. 		total = subtotal + tax;
20. 		total = Math.floor(total * 1000)/1000;
21. 		totaal.value = '€' + cent(total);
22. 		}
23. }
24. </script>
25. 
26. <form>
27. <table>
28. <tr><td align="right">Hoeveelheid:</td><td><input type="text" id="quantity" size="8"></td></tr>
29. <tr><td align="right">Kost per eenheid:</td><td><input type="text" id="unitcost" value=""size="8"></td></tr>
30. <tr><td align="right">BTW (%): </td><td><input type="text" id="rate" value="19"size="8"></td></tr>
31. <tr><td align="right">Subtotaal: </td><td><input type="text" id="subtotal"size="8"></td></tr>
32. <tr><td align="right">BTW: </td><td><input type="text" id="tax"size="8"></td></tr>
33. <tr><td align="right">Totaal: </td><td><input type="text" id="total"size="8"></td></tr>
34. <tr><td> </td><td><input type="button" onclick="update(this.form)" value="Bereken" /></td></tr>
35. </table>
36. </form>

De code doet veel zelf, maar natuurlijk niet alles. Jij moet alleen de bovenste twee invullen, en op Bereken klikken. Vervolgens krijg je het resultaat te zien. De code ziet er misschien erg lastig uit, maar dat komt voornamelijk door het grote aantal tekens. Bepaalde dingen moet je wel weten, zoals waar Math.floor() voor staat. Dit haalt namelijk de decimalen weg bij je getallen. Om het simpel te maken, hieronder een klein voorbeeld:

<script type=text/javascript>
var i = 21.4568
document.write(Math.floor(i))
</script>

Als resultaat krijg je 21.