Rechenfehler

donaldax · 1. Dezember 2017

Hallo Zusammen,

ich habe von einem ganz netten HTML-Seminar-Mitglied Hilfe zu einem Script bekommen, welches

Gewicht in Euro berechnen soll. Alles tadellos super. Doch ist mir nun aufgefallen, daß nur ganze

Zahlen, also ohne Nachkommastellen, berechnet werden. Gebe ich eine Zahl mit Kommastellen ein

so kommt lediglich der Ausdruck "NaN €"

Das Script sieht wie folgt aus:

Code

<form>
        Gewicht: <input id="gewicht" />
        Material:
        <select id="material">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leine</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis"></span>
    </form>
    <script>
            function berechnen() {
                var valgewicht = gewicht.value;
                var idxmaterial = material.selectedIndex;
                var preis = material.options[idxmaterial].value;
                if (valgewicht != "" && idxmaterial != 0) {
                    ergebnis.innerHTML = valgewicht * preis + ' €';
                } else {
                    ergebnis.innerHTML = "";
                }
            }
            var gewicht = document.getElementById("gewicht");
            var material = document.getElementById("material");
            var ergebnis = document.getElementById("ergebnis");
            gewicht.addEventListener("input", berechnen);
            material.addEventListener("change", berechnen);
    </script>


Darüber hinaus sehe ich keine Möglichkeit, die Felder "Gewicht" und "Material" zu verkleinern. 

Wenn ich dieses Script auf meiner künftigen Homepage (es geht um Stoffe und Kleider Ankauf) 2 mal untereinander 
eingebe, dann dachte ich, daß ich ja 2 mal die Möglichkeit habe, mir das Gewicht und Ergebnis anzeigen zu lassen. Leider scheint dies aber ein Irrglaube zu sein, denn die zweite Ausgabe wird dann nicht mehr berechnet, siehe Bild "Rechner_2" Ist das nun mein Ungeschick oder lässt sich so ein Script wirklich nicht kopieren? Und mein letztes Anliegen wo ich auch nicht weiter komme, ist die Möglichkeit, die jeweiligen Ergebnise addieren zu lassen. Da bekomme ich einfach kein Ergebnis zustande.


Bedanke mich ganz herzlich schon Vorab

Liebe Grüße, 

Andrea

Alles anzeigen

Sempervivum · 1. Dezember 2017

Zum Rechenfehler: Das liegt daran, dass Javascript den Punkt als Dezimalzeichen erwartet, nicht das Komma. Das kann man jedoch leicht beheben, indem man ein Komma durch einen Punkt ersetzt:

Code

function berechnen() {
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnis.innerHTML = valgewicht * preis + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
        }

Und die Größe der Felder kannst Du durch CSS verändern, z. B.:

Code

<style>
        #gewicht {
            width: 100px;
        }
    </style>

Zitat

Wenn ich dieses Script auf meiner künftigen Homepage (es geht um Stoffe und Kleider Ankauf) 2 mal untereinander eingebe, dann habe ich ja 2 mal die Möglichkeit, mir das Gewicht und Ergebnis anzeigen zu lassen. Siehe Bild. Gibt es eine Möglichkeit, die jeweiligen Ergebnise addieren zu lassen?

Das lässt sich auf jeden Fall machen. Ich fürchte nur, dass dieses Skript nur mit einem Satz von Ein- und Ausgaben funktionieren wird. Wird es denn definitiv bei zwei Sätzen bleiben oder können es noch mehr werden?

donaldax · 1. Dezember 2017

Lieber Sempervivum,

ein ganz dickes Dankeschön für deine Hilfe. Ich stolpere doch jedesmal über die Punkt,-Komma Eingabe.

Es könnten bis zu vier Eingaben werden, muss noch eine Eingabemöglichkeit für Mischgewebe machen und

eine für Satin, also 4 insgesamt.

Liebe Grüße

Andrea

Sempervivum · 1. Dezember 2017

Und sollen dann die Optionen in den Selects jedes Mal gleich sein?

donaldax · 1. Dezember 2017

teilweise ja, teilweise nein. Bei Mischgewebe würde ich eine handvoll Angaben ind ie Auswahllsite vorgeben, bspw. 40% oder 60% usw.

Ach Sempervivum, darf ich dich noch um einen Hinweis bitten? Wie kann man erreichen, daß nur 2 Nachkommastellen angezeigt wierden?

Sempervivum · 1. Dezember 2017

Dann probiere dieses:

Code

<form>
        Gewicht: <input id="gewicht1" />
        Material:
        <select id="material1">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis1"></span>
    </form>
    <form>
        Gewicht: <input id="gewicht2" />
        Material:
        <select id="material2">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis2"></span>
    </form>
    <style>
        #gewicht {
            width: 100px;
        }
    </style>
    <script>
        var anzahl = 2;
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>

Alles anzeigen

Die Anzahl der Nachkommastellen kann man mir toFixed() festlegen.

donaldax · 1. Dezember 2017

Vielen Dank, das ist echt super. Habe das Script eben eingebaut, die ersten beiden Operationen gehen, die beiden anderen zeigen leider kein Ergebnis. Allerding kommt dieses "NaN €" nicht mehr.

Sempervivum · 1. Dezember 2017

Hast Du auch die Variable anzahl auf 4 gesetzt?

donaldax · 1. Dezember 2017

Es ist wirklich zum Haare raufen, dabei war ich gestern erst beim Friseur

donaldax · 1. Dezember 2017

Ok, sehe den Fehler.

Vorhin hatte ich noch mein "altes" Script, welches aus 2 Auswahlfeldern bestand. Dann habe ich das neue von Dir eingepflegt und es sind 2 Auswahllisten dazugekommen. Das alte Script habe ich entfernt und das Script von dir funktioniert, die Einstellung habe ich so gemacht wie auf dem Bild

html-seminar.de/woltlab/attachment/1249/

Sempervivum · 1. Dezember 2017

Heißt das, es funktioniert jetzt so weit?

Dann die Berechnung der Summe:

Code

    <span id="summe"></span>
    <script>
        var anzahl = 4;
        var ergebnisse = [];
        function summieren() {
            var endsumme = 0;
            for (var nr = 1; nr <= anzahl; nr++) endsumme += ergebnisse[nr];
            document.getElementById("summe").innerHTML = endsumme.toFixed(2).replace(".", ",") + ' €';
        }
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnisse[nr] = (valgewicht * preis);
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".", ",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
            summieren();
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            ergebnisse[nr] = 0;
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>

Alles anzeigen

donaldax · 1. Dezember 2017

Hallo Sempervivum,

ja, soweit bin ich glücklich, herzlichen Dank für Deine Hilfe. Es werden mir 2 Auswahllisten angezeigt, ist soweit in Ordnung.

Bastle gerade noch am Endergebnis rum, da mir hier dieses verrückte "NaN €" angezeigt wird

Sempervivum · 1. Dezember 2017

Wenn es mehr sein sollen, musst Du weitere hinzu fügen und die Nummerierung anpassen. Das Javascript passt sich entsprechend der Variablen anzahl selber an.

donaldax · 1. Dezember 2017

Juhuuuuuuuuu....es funktioniert alles

Super!! Sempervivum...Du bist der beste

Dicker Schmatzer + liebe Grüße

Andrea

donaldax · 1. Dezember 2017

Lieber Sempervivum.....hab noch eine klitzekleine Bitte

Wenn ich beim Endergebnis "Wir zahlen Ihnen" davor setzen möchte, würdest du mir die Stelle verraten bitte??

Danke Vorab

basti1012 · 1. Dezember 2017

ich würd zeile 19 nehmen

Code

ergebnis.innerHTML = '<p>Wir zahlen ihnen!</p>'+(valgewicht * preis).toFixed(2).replace(".",",") + ' €';

aber Sempervivum hat bestimmt nee bessere idee wie man es machen kann

Rechenfehler

Jetzt mitmachen!

Teilen