#1 10. Januar 2012 Hallo Jungs ^^ Ich wollte einen Getränkerechner für unsere Firma erstellen. Bin auch soweit eigentlich gut voran gekommen, nur eine Sache fehlt mir noch zur Vollendung meiner Arbeit. Hier einmal der Quelltext: HTML: <!DOCTYPE html> <html> <head> <title> Getränkerechner 1.0 </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Getränke Rechner 1.0</h1> </header> <hr/> <h3>Wasser, Malzbier</h3> <form method="get"> <input name="num1" type="number" value="0"> <output name="numresult1" onforminput="value=num1.valueAsNumber * 0.55"> 0 </output> ,-EUR </form> <hr/> <h3>Schorle, Limonade, Cola-Mix</h3> <form method="get"> <input name="num2" type="number" value="0"> <output name="numresult2" onforminput="value=num2.valueAsNumber * 0.70"> 0 </output> ,-EUR </form> <hr/> <h3>ISO-Aktiv, Coca-Cola</h3> <form method="get"> <input name="num3" type="number" value="0"> <output name="numresult3" onforminput="value=num3.valueAsNumber * 0.50"> 0 </output> ,-EUR </form> <h1> Ich kann im Value Fenster die Anzahl der Getränke bestimmen diese wird dann in Output mit dem angegebenem Preis Multipliziert. Siehe hier (funzt nur mit Opera, glaube ich ) http://pastehtml.com/view/bk9r2a01h.html So habe ich 3 Verschiedene Werte, diese will ich aber zusammenfassen so das am ende der zu zahlende betrag stehen soll. Hättet ihr eine Idee wie ich das verwirklichen kann? Ahja, sicherlich gibt es einfachere Arten wie mit JavaScript aber da einfache Rechenaufgaben nun mit HTML5 möglich sind, möchte ich diese Aufgabe damit erledigen. Danke schonmal für eure Hilfe. greetz tayfun + Multi-Zitat Zitieren
#2 10. Januar 2012 AW: Rechnen mit dem output Element im HTML5 Ohne Javascript wird das sowieso nichts, da das Output-Element nur zum Anzeigen da ist. onFormInput ist übrigens ein Event von Javascript HTML: <form method="get" oninput="numresult1.value=parseInt(num1.valueAsNumber)*0.55"> <input name="num1" type="number" value="0"> <output name="numresult1" for="num1">0.00</output>,-EUR </form> //Edit, hier ein besseres Beispiel, aber verbesserungswürdig! HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Getränke Rechner</title> <script> function formatAsMoney(mnt) {mnt-=0;mnt=(Math.round(mnt*100))/100;return (mnt==Math.floor(mnt))?mnt+'.00':((mnt*10==Math.floor(mnt*10))?mnt+'0':mnt);} function recalc() { var val, sum = 0; // Categorie 1 val = (parseFloat(this.inpcat1price.value) * parseFloat(this.inpcat1.value)); sum += val; this.outcat1.value = formatAsMoney(val); // Categorie 2 val = (parseFloat(this.inpcat2price.value) * parseFloat(this.inpcat2.value)); sum += val; this.outcat2.value = formatAsMoney(val); // Total this.outall.value = formatAsMoney(sum); } window.addEventListener( 'load', function() { console.log( 'Loaded' ); document.getElementById('liste').addEventListener( 'input', recalc ); }); </script> </head> <body> <form action="post" id="liste"> <fieldset> <legend>Wasser, Malzbier</legend> <input type="hidden" name="inpcat1price" value="0.55" /> <input type="number" min="0" name="inpcat1" value="0" /> <output name="outcat1" for="inpcat1price inpcat1">0.00</output> € </fieldset> <fieldset> <legend>Schorle, Limonade, Cola-Mix</legend> <input type="hidden" name="inpcat2price" value="0.77" /> <input type="number" min="0" name="inpcat2" value="0" /> <output name="outcat2" for="inpcat2price inpcat2">0.00</output> € </fieldset> <fieldset> <legend>Gesamt: </legend> <output name="outall" for="outcat1 outcat2">0.00</output> € </fieldset> </form> </body> </html> + Multi-Zitat Zitieren