[JS] Addieren statt zusammenfügen

[Undaground]

Hey Com,

habe ein kleines Problemchen mit meinem Code, ich habe die Datentypen auf Float gesetzt aber trotzdem werden die Zahlen einfach nur hintereinander geschrieben.

$(document).ready(function () {
		var $item = $('.select-pizza'),
			$select = $item.find('.pizza-size'),
			$addBtn = $('.pizza-add'),
			$addIngredient = $('.ingredient-add');

		$select.on('change', function (e) {
			$(this).parent().find('.pizza-price span').html($(this).find('option:selected').data('price'))
		}).trigger('change');



		$addIngredient.on('click', function () {
			var $wrapper = $(this).parent(),
				$currOpt = $wrapper.find('.pizza-add-ingredient option:selected'),
				$list = $wrapper.find('.pizza-ingredients'),
				newPrice = parseFloat($wrapper.find('.pizza-price span').html(), 10) + $currOpt.data('price');

			$list.append('<li data-price="' + $currOpt.data('price') + '"><span>' + $currOpt.text() + '</span> <a href="#" class="remove-ingredient"> entfernen</a></li>');
			$wrapper.find('.pizza-price span').html(newPrice);
		});
		$(document).on('click', '.remove-ingredient', function (e) {
			e.preventDefault();
			var $this = $(this),
				$wrapper = $this.closest('.select-pizza'),
				newPrice = parseFloat($wrapper.find('.pizza-price span').text(), 10) - parseFloat($this.parent().data('price'));

			$wrapper.find('.pizza-price span').text(newPrice);
			$this.parent().remove();
		});
		$addBtn.on('click', function () {
			var $wrapper = $(this).parent(),
				$currOpt = $wrapper.find('.pizza-size').find('option:selected'),
				ingredients = [];
			$wrapper.find('.pizza-ingredients li span').each(function (i, el) {
				ingredients.push('<li>' + $(this).html() + '</li>');
			});

			var myItem = simpleCart.add({
				name: $wrapper.find('.pizza-name').html(),
				price: parseFloat($wrapper.find('.pizza-price span').html(), 10),
				size: $currOpt.val(),
				extras: ingredients.join('')
			});
		});
	})

[False]

Bitte ein funktionstüchtiges Beispiel(jsfiddle.net) erstellen, wo man schnell helfen kann.Und bitte den Code übersichtlicher machen, das kann schonmal nicht gehen :
$addBtn.on('clickunction () {

[Undaground]

$(document).ready(function () {
		var $item = $('.select-pizza'),
			$select = $item.find('.pizza-size'),
			$addBtn = $('.pizza-add'),
			$addIngredient = $('.ingredient-add');

		$select.on('change', function (e) {
			$(this).parent().find('.pizza-price span').html($(this).find('option:selected').data('price'))
		}).trigger('change');



		$addIngredient.on('click', function () {
			var $wrapper = $(this).parent(),
				$currOpt = $wrapper.find('.pizza-add-ingredient option:selected'),
				$list = $wrapper.find('.pizza-ingredients'),
				newPrice = parseFloat($wrapper.find('.pizza-price span').html(), 10) + $currOpt.data('price');

			$list.append('<li data-price="' + $currOpt.data('price') + '"><span>' + $currOpt.text() + '</span> <a href="#" class="remove-ingredient"> entfernen</a></li>');
			$wrapper.find('.pizza-price span').html(newPrice);
		});
		$(document).on('click', '.remove-ingredient', function (e) {
			e.preventDefault();
			var $this = $(this),
				$wrapper = $this.closest('.select-pizza'),
				newPrice = parseFloat($wrapper.find('.pizza-price span').text(), 10) - parseFloat($this.parent().data('price'));

			$wrapper.find('.pizza-price span').text(newPrice);
			$this.parent().remove();
		});
		$addBtn.on('click', function () {
			var $wrapper = $(this).parent(),
				$currOpt = $wrapper.find('.pizza-size').find('option:selected'),
				ingredients = [];
			$wrapper.find('.pizza-ingredients li span').each(function (i, el) {
				ingredients.push('<li>' + $(this).html() + '</li>');
			});

			var myItem = simpleCart.add({
				name: $wrapper.find('.pizza-name').html(),
				price: parseFloat($wrapper.find('.pizza-price span').html(), 10),
				size: $currOpt.val(),
				extras: ingredients.join('')
			});
		});
	})

so siehts aus, keine Ahnung wie das da oben zustande kam aber so sieht der eigentliche code aus. Ich denke JSfiddle is dazu nicht wirklich notwendig wenn sich jemand wirklich auskennt. Vllt sieht jemand ob ich irgendwo ein Datentyp falsch einsetze oder value als text auslese

[Devsome]

Originally Posted by .ƒaℓsє.

Bitte ein funktionstüchtiges Beispiel(jsfiddle.net) erstellen, wo man schnell helfen kann.Und bitte den Code übersichtlicher machen, das kann schonmal nicht gehen :
$addBtn.on('clickunction () {

danke.

---
@Te:
Doch ein jsfiddle.net ist nötig, da wir, wenn wir uns schon in ein Code reinarbeiten müssen nicht auch noch in HTML die ganzen klassen erstellen wollen.

[Shadow992]

Hab den Code nicht wirklich angeschaut und mich darauf verlassen, dass ich die Frage aus dem Kontext und meinen Erfahrungen her richtig verstanden habe, aber JS optimiert intern sehr viel.
Dazu gehört unter anderem auch das Umwandeln in Strings, wenn es logisch erscheint.

Das heißt etwas deartiges:

var tmp1=10;
var tmp2=15;

var tmp3="Hallo "+(tmp1+tmp2);
// etliche Befehle mehr, die tmp1 und tmp2 als String erwarten/verwenden

Kann "fälschlicherweise" tmp1 und tmp2 von Anfang an als String speichern und es nur bei Bedarf einmal kurz umwandeln, wobei dann aber nicht der Typ von tmp1 oder tmp2 geändert wird (dieser ist weiterhin STRING) sondern nur der Inhalt in einen Int konvertiert in eine andere nicht sichtbare Variable verschoben, nicht jedoch der Typ der Variable selbst sich ändert.

Auf gut deutsch obiger Code könnte äquivalent sein zu:

var tmp1=10;
var tmp2=15;

var tmp3="Hallo 1510";
// etliche Befehle mehr, die tmp1 und tmp2 als String erwarten/verwenden

Damit man Javascript dazu zwingt auch wirklich 2 Zahlen zu addieren, muss man eine Operation nehmen, die nur auf Zahlen anwendbar ist. Das kann Math.abs sein, |0 oder sonst irgendetwas. Normalerweise nimmt man aber *1. Das heißt der Code oben sähe so aus:

var tmp1=10;
var tmp2=15;

var tmp3="Hallo "+(tmp1*1+tmp2*1);
// etliche Befehle mehr, die tmp1 und tmp2 als String erwarten/verwenden