Interactieve werking met combobox in een tabel

Status
Niet open voor verdere reacties.
S

SNWanted

Nieuwe gebruiker
Lid geworden
25 nov 2012
Berichten
2
Hallo iedereen,

Als beginnende met javascript, heb ik wat hulp nodig om mijn tabel interactief te maken.

Wat ik wil is een berekening maken waarvan de uitkomst in mijn laatste kolom staat.

Hoe krijg ik dit voor elkaar?

Hieronder mijn code.

Code: 
<html>
	<head>
		<script type="text/javascript">
		function Berekenen()
			{
			var Aantal = document.getElementById("Aantal").value;
			var Totaal = parseFloat(Prijs) * parseInt(Aantal);
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
		var Prijs = 1.25;
		</script>
		<TABLE border="1px">
			<TR>
   				<TH>Artikel</TH>
   				<TH>Prijs</TH>
   				<TH>Aantal</TH>
   				<TH>Totaal</TH>
			</TR>
			<TR>
   				<TD>Artikel1</TD>
   				<TD><script type="text/javascript">document.write(Prijs);</script></TD>
   				<TD><select id="Aantal"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3<option value="4">4</option><option value="5">5</option>
   					<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></TD>
   				<TD><script type="text/javascript">document.write(Totaal);</script></TD>
			</TR>
		</table>
	</body>
</html>
 
Hoi SNWanted,

Je was op de goede weg. Hieronder een werkend exemplaar:

[js]<html>
<head>
<script type="text/javascript">
var prijs = 1.25;

/*
Men moet wachten met het aanroepen van HTML elementen totdat de pagina volledig is geladen,
anders zijn de elementen die je wilt aanroepen (met document.getElementById) niet gedefinieerd.
Zie: http://stackoverflow.com/a/7088499/1271566
*/
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
initPrijs();
clearInterval(readyStateCheckInterval);
}
}, 10);

/*
De prijs op het scherm zetten
*/
function initPrijs(){
document.getElementById("prijs").innerHTML = prijs;
}

/*
Wanneer de waarde in de dropdown 'aantal' veranderd, zal deze functie aangeroepen worden.
Deze functie zal de prijs x aantal berekenen en terug op het scherm zetten in het 'totaal' veld.
*/
function Berekenen(){
var aantal = document.getElementById("aantal").value;
var totaal = parseFloat(prijs) * parseInt(aantal);
document.getElementById("totaal").innerHTML = totaal;
}
</script>
</head>
<body>
<TABLE border="1px">
<TR>
<TH>Artikel</TH>
<TH>Prijs</TH>
<TH>Aantal</TH>
<TH>Totaal</TH>
</TR>
<TR>
<TD>Artikel1</TD>
<TD id="prijs"></TD>
<TD><select id="aantal" onchange="Berekenen()"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3<option value="4">4</option><option value="5">5</option>
<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></TD>
<TD id="totaal">0</TD>
</TR>
</table>
</body>
</html>[/js]

Resultaat:

tUTVu.gif
 
Laatst bewerkt:
Hey,

Bedankt voor dit script, ik had dit niet alleen gevonden.

Ga er nu mee aan de slag om dit in een groter tabel te krijgen.

Bedankt om mij opweg te helpen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan