Volume berekening

Status
Niet open voor verdere reacties.
N

Noord2011

Gebruiker
Lid geworden
28 jan 2009
Berichten
350
Geachte Helpers,

Graag ben ik opzoek naar hulp voor onderstaande HTML code.

Ik heb zelf is gemaakt, maar ik weet niet hoe ik het resultaat in het onderstaande veld moet laten komen.
Het idee is op online op een website Lengte x breedte x Hoogte = volume in cm, te laten tonen.

Zie onderstaande code.

HTML: 
<h1>Volume</h1>

</p>
<input type="text" name="product_size1" placeholder="Max. Lengte:80">
</p>
<div style="float:left">
<input type="text" name="product_size2" placeholder="Max. Breebte:80">
</p>
<div style="float:left">
<input type="text" name="product_size3" placeholder="Max. Hoogte:80">
</p>
<div style="float:left">

<p><input type="button" value="Berekening Liter" onclick="Rec(this.form)" style="font-family:arial; font-size:15px; font-style:bold; background:#D8DfFF none; color:purple; width:10em"></p>
<p class="prpl">Inhoud:</p> 
<input type="text" name="resultaat3" placeholder="Totaal in liter">

Alvast bedankt
 
Hi, ik heb alleen naar de html en css gekeken. Je hebt geen script info gegeven die nodig is voor de berekening, maar die zal je al hebben denk ik. Dus onclick="Rec(this.form)" heb ik zo laten staan.
In de <head> komt:
Code: 
<style type="text/css">
#berekening input {
    float: left; font: bold 15px arial,sans-serif; margin-right: 5px; padding: 5px;
}
#berekening input.knop {
    background: #d8dfff; color: purple; width: 10em; padding: 4px;
}
</style>
<script type="text/javascript">
function rec( ... ) {
  ..... .....
}
</script>
In de <body> komt:
Code: 
<div id="berekening">
    <h1>Volume</h1>
    <input type="text" name="product_size1" placeholder="Max. Lengte:80" />
    <input type="text" name="product_size2" placeholder="Max. Breebte:80" />
    <input type="text" name="product_size3" placeholder="Max. Hoogte:80" />
    <input type="submit" class="knop" value="Berekening Liter" onclick="Rec(this.form)" />
    <p>&nbsp;</p>
    <p class="prpl"><br />Inhoud:</p>
    <input type="text" name="resultaat3" placeholder="Totaal in liter" />
</div>
Suc6. Have fun.
 
Laatst bewerkt:
En ter aanvulling: ik zie in de html geen form element. Als je een funtie hebt die this.form gebruikt moet er wel een form zijn (binnen de context window)

Vriendelijke groet,

Arjan.
 
Het wat bij elkaar geplakt.
Ik heb geen programmeur.

Onderstaande werk op "w3schools.com".

Alleen wil ik iets extra toevoegen:

Is het resultaat in ("text" name="resultaat") Tussen 1 en 60, toon tekst, Inhoud-A
Is het resultaat in ("text" name="resultaat") Tussen 60 en 100, toon tekst, Inhoud-B
Is het resultaat in ("text" name="resultaat") Tussen 100 en 160, toon tekst, Inhoud-C
Is het resultaat in ("text" name="resultaat") groter dan 160, toon tekst, Inhoud-Z

Zie mijn code
HTML: 
<html>

<head>

<script>

   function aftrekken (getal)

{

   getal.resultaat.value = getal.waarde1.value*getal.waarde2.value *getal.waarde3.value

}

</script>

</head>

<body>

<form>

Volume berekening in cm. <p>

<input type="text" name="waarde1" size=15 placeholder="Max. Hoogte:80"> +t <p>

 

<input type="text" name="waarde2" size=15 placeholder="Max. Lengte:80"> +t<p>

 

<input type="text" name="waarde3" size=15 placeholder="Max. Breedte:80"> <p>

 

<input type="button" value="Berekenen" onClick="aftrekken (this.form)"><br> <p>

Dit is het antwoord: <p>

<input type="text" name="resultaat" size=20 placeholder=" Totaal Ltr">

</form>

</body>

</html>

Alvast bedank voor de hulp
 
Alles bij elkaar kan het zo eruit zien. Ik heb geprobeerd het eenvoudig leesbaar te houden.
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Volume</title>
<style>
#form1 input {
	float: left; font: bold 15px arial,sans-serif; margin-right: 5px; padding: 5px;
}
#form1 input.knop {
	background: #d8dfff; color: purple; width: 10em; padding: 4px;
}
</style>
<script>
function Bereken() {
	Form = document.getElementById("form1");
	Hoogte  = Form.elements["waarde1"].value;
	Lengte  = Form.elements["waarde2"].value;
	Breedte = Form.elements["waarde3"].value;
	Inhoud  = Hoogte * Lengte * Breedte;
	if (Inhoud <= 0)        Tekst = "Onjuiste waarde(s)";
	else if (Inhoud < 60)   Tekst = "Inhoud-A";
	else if (Inhoud < 100)  Tekst = "Inhoud-B";
	else if (Inhoud < 160)  Tekst = "Inhoud-C";
	else if (Inhoud >= 160) Tekst = "Inhoud-Z";
	else                    Tekst = "Onjuiste waarde(s)";
	Form.elements["resultaat"].value = Tekst;
}
</script>
</head>
<body>
<form id="form1">
	<p>Volume berekening in cm.</p>
	<input type="text" name="waarde1" size=15 placeholder="Max. Hoogte:80">
	<input type="text" name="waarde2" size=15 placeholder="Max. Lengte:80">
	<input type="text" name="waarde3" size=15 placeholder="Max. Breedte:80">
	<input type="button" class="knop" value="Berekenen" onClick="Bereken()">
	<br>
	<p>Dit is het antwoord:</p>
	<input type="text" name="resultaat" placeholder="Totaal Ltr" disabled>
</form>
</body>
</html>
Suc6.
 
Laatst bewerkt:
Beste Bron,

Je html code wekt prima op w3schools.

Maar als ik de code paste in mijn website dan kan ik alleen op in de eerste text veld informatie invoeren. In het twee andere text velden kan ik niks invoeren.

Stap invoer html code:
Muffing group, < add, > item, > en daarna kies in voor column.

Misschien moet ik een ander optie kiezen. Welke dan?

Alvast bedank voor de hulp.
 
Stap invoer html code:
Muffing group, < add, > item, > en daarna kies in voor column.
Klik om te vergroten...
Klinkt als Wordpress... misschien kan iemand anders hiermee helpen?
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan