Rechnen mit dem output Element im HTML5

Dieses Thema im Forum "Webentwicklung" wurde erstellt von tayfun, 10. Januar 2012 .

  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
     
  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&auml;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> &euro;
     </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> &euro;
     </fieldset>
    
    
     <fieldset>
     <legend>Gesamt: </legend>
     <output name="outall" for="outcat1 outcat2">0.00</output> &euro;
     </fieldset>
    
     </form>
    
    
    
    </body>
    </html>
     
  3. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.