✔ Plus Minus Button

[Nikke123]

Hallo Leute,

Ich habe ein kleines Problem, bei dem ich garnicht weis wie ich das realisieren soll, da ich nicht so fit in Javascript bin. Ich lasse per PHP Daten zu verschiedenen in der Datenbank eingetragenen Blumen abrufen. Diese werden dann tabellarisch in einer While schleife ausgegeben. Ca so:

Blume 1
Name: Blume1
Größe: x cm
Beschreibung: Schöne Blume

Blume 2
Name: Blume2
Größe x cm
Beschreibung: Noch eine schöne Blume

Jetzt soll unter jede Beschreibung mit der While Schleife ein Plus und ein Minusbutton gemacht werden, sodass man die Menge auswählen kann, die man haben will:

- [aktuelle Anzahl] +

Beim Klick auf Plus wird da eins dazu gerechnet beim Klick auf Minus wieder eins runter.
Wie kann ich das realisieren?

MFG
Niklas

 

[para_noid]

Vorschlag:

je Schleifendurchlauf:

<div onclick="minus("anzahlBlume1");">-</div>
<div id="anzahlBlume1">0</div>
<div onclick="plus("anzahlBlume1");">+</div>

im Head-Bereich oder ausgelagert:

function minus(id){
  var anzahlDiv = getElementById(id);
  var anzahl =parseInt(anzahlDiv.innerHTML);
  anzahl -= 1;
  anzahlDiv.innerHTML = anzahl;
}

function plus(id){
  var anzahlDiv = getElementById(id);
  var anzahl = parseInt(anzahlDiv.innerHTML);
  anzahl += 1;
  anzahlDiv.innerHTML = anzahl;
}

 

[Nikke123]

Genau sowas hatte ich mir gedacht nur leider lässt sich das nicht klicken

 

[Nikke123]

Hat keiner mehr eine Idee? Ich google auch selber schon nebenher hab aber noch keine brauchbare Lösung gefunden.

 

[para_noid]

Das kommt davon, wenn man seinen Kram nicht testet...

<div onclick='minus("anzahlBlume1");'>-</div>
<div id="anzahlBlume1">0</div>
<div onclick='plus("anzahlBlume1");'>+</div>

Hier waren die " und ' falsch

function minus(id){
  var anzahlDiv = document.getElementById(id);
  var anzahl =parseInt(anzahlDiv.innerHTML);
  anzahl -= 1;
  anzahlDiv.innerHTML = anzahl;
}
 
function plus(id){
  var anzahlDiv = document.getElementById(id);
  var anzahl = parseInt(anzahlDiv.innerHTML);
  anzahl += 1;
  anzahlDiv.innerHTML = anzahl;
}

Hier fehlte jeweils das document.

 

[Nikke123]

Vielen Vielen Dank und für die, die es interessiert:
Eine Kombination aus diesem Eintrag und dem hier:
http://www.tutorials.de/javascript-ajax/382122-mit-checkbox-css-werte-dynamisch-veraendern.html

Sieht wie folgt aus:
Javascript:

<script type="text/javascript">
		var k = 0;

		function minus(id, size){
		var anzahlDiv = document.getElementById(id);
		var anzahl =parseInt(anzahlDiv.innerHTML);
		anzahl -= 1;
		if(anzahl < 0){
		anzahl = 0;
                k = 0;
		} else{
                k -= size;
                }
		anzahlDiv.innerHTML = anzahl;
		document.getElementById("fortschritt").style.width = k;
		}
 
		function plus(id, size){
		var anzahlDiv = document.getElementById(id);
		var anzahl = parseInt(anzahlDiv.innerHTML);
		anzahl += 1;
		anzahlDiv.innerHTML = anzahl;
		k += size;
		document.getElementById("fortschritt").style.width = k;
		}
		</script>

While Schleife:

<div onclick='minus(\"".$blumen_array['name']."\", ".$blumen_array['groeße'].");'>-</div>
					<div id=\"".$blumen_array['name']."\">0</div>
					<div onclick='plus(\"".$blumen_array['name']."\", ".$blumen_array['groeße'].");'>+</div>

 

[Dr Dau]

Hallo!

While Schleife:

<div onclick='minus(\"".$blumen_array['name']."\", ".$blumen_array['groeße'].");'>-</div>
					<div id=\"".$blumen_array['name']."\">0</div>
					<div onclick='plus(\"".$blumen_array['name']."\", ".$blumen_array['groeße'].");'>+</div>

Zwei kleine Anmerkungen:
1. wenn ich es richtig sehe, fehlt hinter id= ein Escapezeichen (PHP sollte da eigentlich ein Parse Error ausspucken, wenn man die Fehlermeldungen nicht unterdrückt hat).
2. "groeße" ist ein Widerspruch in sich. Einerseits schreibst Du "oe" und andererseits schreibst Du "ß".
Um wirklich ganz sicher zu gehen dass es keine Probleme mit den verwendeten Zeichen gibt, schreibe lieber "groesse".

Gruss Dr Dau