Problem: Javascript variable wird immer überschrieben

Joeym · 12. Feb. 2016

Hallo,
ich lasse mir via Javascript input Felder erstellen mit einem value drin, welchen ich übergebe . Leider überschreibt (was auch klar ist) Javascript immer direkt alle Variablen und nicht nur diese eine an der einen Position. Wähle ich also Button A schreibt er auch A rein in Position 1. Wähle ich Button B schreibt er B in Position 1 und 2... usw. das soll natürlich nicht so sein und nur in Position 2 soll er den Wert rein schreiben.

Jemand eine Idee?

die Funktion wird wie folgt aufgerufen:

Code:

<input id="submit" name="<?php echo $out['name']; ?>" type="submit" value="<?php echo $out['name']; ?>" onclick="javascript:new_position('<?php echo $out['name']; ?>', '2');calc();">

Die Funktion:

Code:

function new_position(name, preis) {
	$('new_positions').innerHTML += '<span style="display: none;" id="pos' + position + '_value"></span><span style="display: none;" id="pos' + position + '_betrag_value"></span><span style="display: none;" id="pos' + position + '_menge_value"></span><dl class="line" style="width: 100%; margin-top: 2px;"><dd class="field" style="margin-left: 0px;"><input onkeyup="javascript:$(\'pos' + position + '_value\').innerHTML = this.value;" type="text" name="pos' + position + '" id="pos' + position + '" /> <input onkeyup="javascript:$(\'pos' + position + '_menge_value\').innerHTML = this.value; calc();" onclick="javascript:calc();" type="text" name="pos' + position + '_menge" style="margin-left: 10px; width: 40px; text-align: right;" id="pos' + position + '_menge" /> <input onkeyup="javascript:$(\'pos' + position + '_betrag_value\').innerHTML = this.value; calc();" class="betrag" style="width: 80px;" type="text" name="pos' + position + '_betrag" onclick="javascript:calc();" id="pos' + position + '_betrag" /> € <input class="betrag" disabled="disabled" style="width: 80px;" type="text" name="pos' + position + '_gesamt" id="pos' + position + '_gesamt" /> €</dd></dl>';
	$('amount_positions').value = position;

	for (var i = 2; i <= position; i++) {

		$('pos' + i).value =  name;

		$('pos' + i + '_betrag').value = preis;
		$('pos' + i + '_menge').value = ($('pos' + i + '_menge_value').innerHTML != '') ? $('pos' + i + '_menge_value').innerHTML : 1;
	}
	
	// For new position in bill form
	position++;
}

kkapsner · 12. Feb. 2016

Deine Schleife ist extra so aufgebaut, dass das überschrieben wird (erste Anweisung innerhalb der Schleife). Wenn du das nicht willst, darfst du das natürlich auch nicht machen.

Aber beschreibe doch, was du genau erreichen willst. Ich habe den Verdacht, dass dein Problem viel einfacher und solider gelöst werden kann. Es ist prinzipiell besser, wenn du bei einem Hilfegesuch dein wirkliches Problem und nicht nur dein technisches Problem beschreibst.

PS: das "javascript:" in den Event-Attributen ist überall überflüssig.
PPS: Warum hat der Button ein type="submit"? Ich dachte, das soll alles mit JS gemacht werden...
PPPS: Ich verstehe den Zweck der onkeyup-Events nicht so wirklich. Warum willst du den Wert in den versteckten <span>s zwischenspeichern?
PPPPS: Soll das ein Warenkorb sein?
PPPPPS: Welches Framework verwendest du da? prototype?

Joeym · 12. Feb. 2016

Ich möchte gerne, dass wenn ich auf den Button drücke, dass er mir dann den Wert ins input Feld schreibt. Klicke ich erneut auf einen anderen Button soll er mir ein neues Feld erstellen mit dem Wert von dem angeklickten Button.

Der onkeyup ist nachher für die Berechnung zuständig. Wenn ich z.B. ins Feld rein klicke und den Preis änder, dann soll das unten in der Gesamtsumme auch geändert werden. Das Funktioniert auch.

Joa.. Warenkorb. Wie gesagt: Klicke auf Dönerteller Button -> neues Inputfeld mit Dönerteller als value und dem Preis. Klicke auf Pommes -> neues Inputfeld mit Pommes als value und dem Preis davon.

Genau: prototype.js

kkapsner · 13. Feb. 2016

Joeym schrieb:
Klicke auf Dönerteller Button -> neues Inputfeld mit Dönerteller als value und dem Preis. Klicke auf Pommes -> neues Inputfeld mit Pommes als value und dem Preis davon.

Was soll passieren, wenn man noch einmal auf Dönerteller klickt?

Joeym schrieb:
Das Funktioniert auch.

Ja, aber das geht auch viel einfacher, indem du beim Berechnen den Wert direkt aus dem <input> herausliest... AHHH jetzt sehe ich dein Problem. Es liegt am innerHTML. Das setzt dir alle geänderten Werte in den <input>s zurück.

Ich würde da ja etwas stärker draufhauen (auch wenn es ein bisschen Overkill ist...):

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#korb #template {
	display: none;
}
.quantity {
	border: 1px solid lightgray;
	width: 2em;
}
</style>
</head>
<body>
<button type="button" class="newPosition" data-price="4" data-name="doener" data-desc="Dönerteller">Döner</button>
<button type="button" class="newPosition" data-price="2" data-name="pommes" data-desc="Pommes Frittes">Pommes</button>
<button type="button" class="newPosition" data-price="0.1" data-name="ketchup" data-desc="Ketchup">Ketchup</button>
<button type="button" class="newPosition" data-price="0.15" data-name="majo" data-desc="Majo">Majo</button>
<ul id="korb">
	<li id="template"><input type="number" min="0" step="1" class="quantity"></input> {desc} à {price} €</li>
</ul>
Gesamtpreis: <span id="sum">-,--</span> €
<script type="text/javascript">
(function(){
	var itemTemplate = document.getElementById("template");
	itemTemplate.parentNode.removeChild(itemTemplate);
	itemTemplate.id = "";
	function Item(name, desc, price){
		var This = this;
		this.name = name;
		this.price = price;
		var quantity = 1;
		Object.defineProperty(this, "quantity", {
			get: function(){return quantity;},
			set: function(value){
				quantity = value;
				quantityInput.value = value;
				korb.update();
			}
		});
		
		this.node = itemTemplate.cloneNode(true);
		var quantityInput = this.node.querySelector(".quantity");
		quantityInput.value = quantity;
		quantityInput.name = name;
		quantityInput.addEventListener("input", function(){
			This.quantity = parseInt(this.value, 10) || 0;
			this.value = This.quantity;
		}, false);
		Array.prototype.slice.call(this.node.childNodes)
			.filter(function(node){return node.nodeType === 3;})
			.forEach(function(node){
				node.nodeValue = node.nodeValue
					.replace(/\{desc\}/g, desc)
					.replace(/\{price\}/g, price.toFixed(2).replace(".", ","));
			}
		);
	}
	var korb = {
		node: document.getElementById("korb"),
		sum: document.getElementById("sum"),
		items: [],
		addItem: function(name, desc, price){
			if (!this.items.some(function(item){
				if (item.name === name){
					item.quantity += 1;
					return true;
				}
				return false;
			})){
				var item = new Item(name, desc, price);
				this.items.push(item);
				this.node.appendChild(item.node);
				this.update();
			}
		},
		update: function(){
			this.sum.innerHTML = this.items.reduce(function(value, item){
				return value + item.price * item.quantity;
			}, 0).toFixed(2).replace(".", ",");
		}
	};
	Array.prototype.slice.call(document.querySelectorAll("button.newPosition[data-price][data-name][data-desc]")).forEach(function(button){
		button.addEventListener("click", function(){
			korb.addItem(this.dataset.name, this.dataset.desc, parseFloat(this.dataset.price) || 0);
		}, false);
	});
}());
</script>
</body>
</html>

- lese, verstehen, verwenden. Bei konkreten Fragen einfach melden.

Joeym · 14. Feb. 2016

Hallo,

danke!

Ich habe es nun so gemacht:

Code:

<head>
<meta charset="utf-8">
<title>Speisen</title>
<style type="text/css">
#korb #template {
	display: none;
}
.quantity {
	border: 1px solid lightgray;
	width: 2em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var data_provider = "data.php";
// Wenn DOM geladen wurde
$(document).ready(function(e) {
	var itemTemplate = document.getElementById("template");
	itemTemplate.parentNode.removeChild(itemTemplate);
	itemTemplate.id = "";
	function Item(name, desc, price){
		var This = this;
		this.name = name;
		this.price = price;
		var quantity = 1;
		Object.defineProperty(this, "quantity", {
			get: function(){return quantity;},
			set: function(value){
				quantity = value;
				quantityInput.value = value;
				korb.update();
			}
		});
		
		this.node = itemTemplate.cloneNode(true);
		var quantityInput = this.node.querySelector(".quantity");
		quantityInput.value = quantity;
		quantityInput.name = name;
		quantityInput.addEventListener("input", function(){
			This.quantity = parseInt(this.value, 10) || 0;
			this.value = This.quantity;
		}, false);
		Array.prototype.slice.call(this.node.childNodes)
			.filter(function(node){return node.nodeType === 3;})
			.forEach(function(node){
				node.nodeValue = node.nodeValue
					.replace(/\{desc\}/g, desc)
					.replace(/\{price\}/g, price.toFixed(2).replace(".", ","));
			}
		);
	}
	var korb = {
		node: document.getElementById("korb"),
		sum: document.getElementById("sum"),
		items: [],
		addItem: function(name, desc, price){
			if (!this.items.some(function(item){
				if (item.name === name){
					item.quantity += 1;
					return true;
				}
				return false;
			})){
				var item = new Item(name, desc, price);
				this.items.push(item);
				this.node.appendChild(item.node);
				this.update();
			}
		},
		update: function(){
			this.sum.innerHTML = this.items.reduce(function(value, item){
				return value + item.price * item.quantity;
			}, 0).toFixed(2).replace(".", ",");
		}
	};
  /*
	Array.prototype.slice.call(document.querySelectorAll("button.newPosition[data-price][data-name][data-desc]")).forEach(function(button){
		button.addEventListener("click", function(){
			korb.addItem(this.dataset.name, this.dataset.desc, parseFloat(this.dataset.price) || 0);
		}, false);
	});
  */
  
	$('#categories').html("<p>Lade Kategorien ...</p>");
	// Hole Kategorien via Ajax Get-Request
	$.get(data_provider,{catlist : ''}).done(function(data){
		// erstelle Buttons mit den zurückgelieferten Daten
		var cat_buttons = "";
		for(i = 0;i < data.length;i++){
			cat_buttons += '<button class="btn" cat_id="' + data[i].id + '">' + data[i].name + '</button>';
		}
		//Füge Buttons ins DOM ein
		$('#categories').html(cat_buttons);
		// registriere für jeden Kategorie-Button einen OnClick-Handler
		$('#categories button').click(function(){
			$('#products').html("<p>Lade Produkte ...</p>");
			// Rufe Produkte der jeweiligen Kategorie ab (die ID der Kategorie haben wir in einem Attribut 'cat_id' des Buttons gespeichert)
			$.get(data_provider,{cat:$(this).attr('cat_id')}).done(function(data){
				// erstelle Buttons für jedes Product
				var cat_products = "";
				for(var i = 0;i < data.length;i++){
				cat_products += '<button class="new Position btn" prod_id="' + data[i].id + '" data-name="' + data[i].name + '" data-price="0.15" data-desc="' + data[i].name + '">' + data[i].name + '</button>';
       //  echo '<button type="button" class="newPosition btn" data-price="0.15" prod_id="' + data[i].id + '" data-name="' + data[i].name + '" data-desc="' + data[i].name + '">' + data[i].name + '</button>';
				}
				//Füge Buttons ins DOM ein
				$('#products').html(cat_products);
				// registriere für jeden Produkt-Button einen OnClick-Handler und mache drin etwas
				$('#products button').click(function(){
 
 
  	Array.prototype.slice.call(document.querySelectorAll("button.newPosition[data-price][data-name][data-desc]")).forEach(function(button){
			korb.addItem(this.dataset.name, this.dataset.desc, parseFloat(this.dataset.price) || 0);

	});
   });     
        
			}).fail(function(data){alert('Error:' + data.responseText)});
		});
	}).fail(function(data){alert('Error:' + data.responseText)});
});


</script>
</head>
<style type="text/css">
.btn { padding: 10px; margin: 5px}
</style>
<body>
<h2>Kategorie wählen</h2>
<div id="categories"></div>
<h2>Produkte</h2>
<div id="products"></div>
<ul id="korb">
	<li id="template"><input type="number" min="0" step="1" class="quantity"></input> {desc} à {price} €</li>
</ul>
Gesamtpreis: <span id="sum">-,--</span> €
</body>
</html>

Nur leider wenn ich auf den Button klicke wird die Position nicht hinzugefügt. Füge ich es an der falschen stelle ein?

Da es unter Pizza realtiv viele Produkte gibt, musste ich mit AJAX das so realisieren, dass wenn ich auf Pizza klicke Pizza Samali etc. ausklappt bzw. anzeigt.

kkapsner · 15. Feb. 2016

Joeym schrieb:
Füge ich es an der falschen stelle ein?

Ja.

Bei oberflächlichem Betrachten, müsste du das einfügen anstatt deinem .click():

Code:

$('#products button').click(function(){
	korb.addItem(this.dataset.name, this.dataset.desc, parseFloat(this.dataset.price) || 0);
});

- - - Aktualisiert - - -

PS: kosten wirklich alle Posten 15 Cent?

Joeym · 15. Feb. 2016

Hallo,

ich müsste nur noch wissen wie man die gewählten Produkte mit PHP ausliest...

kkapsner · 19. Feb. 2016

Du musst ein <form> um das <ul> herum packen, dann kannst du die Daten wie ein normales Formular an ein PHP-Skript schicken.

Problem: Javascript variable wird immer überschrieben

Joeym

New member

kkapsner

Super Moderator

Joeym

New member

kkapsner

Super Moderator

Joeym

New member

kkapsner

Super Moderator

Joeym

New member

kkapsner

Super Moderator