Kleiner Preisrechner

[Marti95.]

Hallo zusammen

Ich bin auf der suche nach einem kleinen JS Preisrechner. Leider bin ich sehr schlecht in Javascript, deswegen benötige ich hier etwas Hilfe.

Ich habe eine variable anzahl an Inputfelder die die anzahl des Produktes bestimmt.

<input type="text" data-ride="spinner" id="spinner{$n}" class="form-control input-number default-cursor text-center" value="0" data-min="0" data-max="{$max}" readonly>

Dieses Inputfeld wird durch + oder - Button, durch Javascript erhöht oder verringert, also nichts physisch durch den benutzer eingetragen

Es ist für mich logisch wie ich 2,3 felder zusammen zählen kann, jedoch verstehe ich nicht, wie ich die Felder zusammen zähle, wenn mir die anzahl der input felder nicht bekannt ist.

Danke und Gruss

Marti

 

[paul schmitz]

Du definierst alle input-Elemente als Kindelemente eines Elements. In JS kannst du dir dann die Kinder dieses einen Elements holen, durchgehen, den Wert auslesen und addieren.

 

[Marti95.]

Hab mich mal bisschen im Netz rumgekämpft...
habe mal etwas zusammen gebastelt.

	function calculatetotal() {
		var price = document.getElementById("javascript-price").innerHTML;
		var num = document.getElementsByClassName("javascript-num").value;
		for (var x in num) {
			x = x + (x*price);
		}
		document.getElementById("totalprice").innerHTML = x;
	}

Leider funktioniert das nicht. Es wird kein wert zurückgeliefert. woran liegts?
Wie gesagt bin auf dem gebiet "JS" wirklich schlecht.

 

[miniA4kuser]

In deinem ersten Beitrag definierst du im HTML die variable ID id="spinner{$n}" und in deinem zweiten Beitrag suchst du mittels JavaScript nach der festen ID "javascript-price"

In deinem ersten Beitrag definierst du im HTML die Klassen class="form-control input-number default-cursor text-center" und in deinem zweiten Beitrag suchst du mittels JavaScript nach der Klasse "javascript-num"


Ein bisschen mehr Code oder eine URL wo man sich das mal anschauen kann wäre hilfreich.
Auch ein Blick in die Fehlerkonsole ist öfters hilfreich.

 

[Marti95.]

Habs wie folgt definiert:

												<span id="javascript-price">{$price|number_format:2}</span> CHF

															<input type="text" data-ride="spinner" id="spinner{$n}" class="form-control input-number default-cursor text-center javascript-num" value="0" data-min="0" data-max="{$max}" onchange="calculatetotal()" readonly>

als Rückgabe wert bekomme ich immer undefined.
Die konsole sagt nichts.
es muss iwo an der variable "num" liegen baer ich bekomms ned raus...

 

[miniA4kuser]

Mach doch mal aus deinem input-Feld aus onchange="calculatetotal()" eine Werteübergabe onchange="calculatetotal(this.value)" und bei deiner Funktion

	function calculatetotal(num) {
		var price = document.getElementById("javascript-price").innerHTML;
		document.getElementById("totalprice").innerHTML = parseFloat(price) * parseFloat(num);
	}

 

[Marti95.]

Hallo

Vielen Dank, das klappt auch erstmals, jedoch werden die Werte der anderen inputfelder somit jedesmal wieder gelöscht.
Ich habe hier einmal eine beispiel seite.

MadMonkey

ich hoffe so kann man sich das etwas besser vorstellen, was ich genau möchte.
Danke und Gruss

 

[kkapsner]

Du musst bei jeder Änderung dann durch alle deine <input>s durchiterieren und die Preise zusammenaddieren.

 

[miniA4kuser]

Hab mir mal die Seite angeschaut. Bei deinen Preisangaben verwendest du immer die selbe ID <span id="javascript-price">100.00</span>, das ist nicht erlaubt da ID's eindeutig vergeben werden müssen. Besser du verwendest eine Klasse <span class="javascript-price">100.00</span>.

Dein onchange="calculatetotal(this.value)" wird doppelt ausgeführt, weil der "spinner" einen .change().trigger(e) ausführt, also komplett weg damit.

Da du die "spinner" über die data-Attribute initialisierst musst du nen kleinen Umweg über jQuery.on() nehmen:

$(document).ready(function () {
    $('input[id^="spinner"]').on('change', function () {
        var totalPrice = 0,
            singlePrice,
            singleQuantity;
    
        $('div.alert', $('div.content')).each(function () {
            var jqElement = $(this);
    
            singlePrice = jqElement.find('span.javascript-price').html();
            singleQuantity = jqElement.find('input[id^="spinner"]').val();
    
            if (singlePrice !== undefined && singleQuantity !== undefined) {
                totalPrice = totalPrice + parseFloat(singlePrice) * parseInt(singleQuantity, 10);
            }
        });
    
        $('#totalprice').html(totalPrice.toFixed(2));
    });
});

 

[Marti95.]

Perfekt. Genau das, was ich gesucht habe! Vielen Dank