Dopplungen im Array vermeiden
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
array
artikel
ausgabe
bestellung
break
code
datum
einkauf
einkaufswagen
element
frucht
schleife
steak
url
verschiedene utensilien
versuch
wasser
zahl
zweig
-
Hallo da draußen!
Ich versuche grade, mir eine Art Einkaufswagen zu schreiben. Der User soll einen Artikel auswählen und sehen können, was er ausgesucht hat. Weiter möchte ich die Artikel gerne zusammenfassen. Also wenn drei mal auf "Steak" klickt, dass dann nicht drei mal das Wort "Steak" aufgelistet wird, sondern gleich "3x Steak" hingeschrieben wird.
Hierfür hielt ich ein Array sinnvoll, wo ich schauen kann, ob der Artikel schon einmal im Einkaufswagen vorhanden ist. Hier hakt es nun leider und ich weiß keinen Weg zum Ziel... Bitte um Hilfe!
<a href="javascript: einkaufsliste('Steak');">Steak</a> | <a href="#" onClick="einkaufsliste('Wasser')">Wasser</a><br /> <br /> <br /> <div id="einkaufswagen" style="background-color:#CECEFD; float:left; width:49%;"> Ich habe gewählt: <br /><br /> </div> <!-- <div id="einkaufsdaten" style="background-color:#CECEFD; float:right; width:49%; margin-left:10px;"> Daten:<br /><br /> </div>--> <script language="JavaScript" type="text/javascript"> var neuesItem; var art = "nichts"; var e = "nichts"; var t = "nichts"; var einkauf = new Array(); var listenlaenge; var steakzaehler = 0; function einkaufsliste(neuesItem) // neuesItem ^= Utensil { //Ausgabe der Einkaufslistenlänge document.getElementById('einkaufswagen').innerHTML += "Bisher " + (einkauf.length + 1) + " verschiedene Utensilien eingekauft.<br />"; listenlaenge = einkauf.length + 1; for(var i = 0; i<listenlaenge; i++) { // document.getElementById('einkaufswagen').innerHTML += "Zähler Aktiviert!<br />"; //Wenn Item schon im Array if (neuesItem == einkauf[i]) { document.getElementById('einkaufswagen').innerHTML += "Dieses Element (" + neuesItem + ") ist schonmal vorhanden!<br />"; break; } //Wenn Item noch nicht im Array else { document.getElementById('einkaufswagen').innerHTML += "Neues Element (" + neuesItem + ") hinzugefügt!<br />"; einkauf.push(neuesItem); break; } } //einkauf.sort(); einkaufausgabe = einkauf.join(","); document.getElementById('einkaufswagen').innerHTML += "Array: <b>" + einkaufausgabe + "</b> - juhuu!<br />"; } </script>
Hier passiert nun folgendes:
Wenn ich 3x "Steak" auswähle, sagt er mir alle 3 mal, dass das Array (/Einkaufswagen) aus "Steak" (nur ein mal) besteht. In Zahlen sagt er mir beim ersten Aufruf, ich hätte einen Artikel, bei den nächsten beiden Klicks hab ich zwei Artikel. Ich hätte aber lieber nur einen Artikel drin...
Wähle ich anschließend 2x "Wasser", sagt er mir erst, dass "Steak, Wasser" in Array sind - gut -, beim zweiten Klick sind aber "Steak, Wasser, Wasser" im Array... x__x In Zahlen heißt es da auch zunächst, es seien noch immer 2 Dinge im Array (kann ich nachvollziehen - Steak und Wasser -). Biem zweiten Klick aufs Wasser bekomme ich dann aber 3 Artikel angezeigt.
Offensichtlich kann ich das erste, ausgewählte Item 2x anwählen, bevor es nicht mehr gezählt wird. Dabei wirds auch nur ein mal in der Arrayausgabe angegeben.
Das zweite Item wird mehrfach bei der Arrayausgabe angezeigt und wird auch bei der Arraylänge beliebig oft eingefügt...
Bitte helft mir, ich weiß nicht mehr weiter...
Nicole
Beitrag zuletzt geändert: 19.8.2009 23:30:57 von nicole -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das Problem ist deine Überprüfungsroutine, falls nämlich das 0-te Element nicht gleich dem neuen ist, behauptest du, es wäre noch nicht im Array. Deine Schleife ist sinnlos, da sie bei i = 0 immer unterbrochen wird, weil sowohl im if-Zweig, wie auch im else-Zweig ein break kommt. Die Elemente 1 und höher schaust du nie an.
Versuch mal das:
var found = false; for(var i = 0; i<listenlaenge; i++) if (neuesItem == einkauf[i]) { document.getElementById('einkaufswagen').innerHTML += "Dieses Element (" + neuesItem + ") ist schonmal vorhanden!<br />"; found = true; break; } if ( ! found) { document.getElementById('einkaufswagen').innerHTML += "Neues Element (" + neuesItem + ") hinzugefügt!<br />"; einkauf.push(neuesItem); }
Beitrag zuletzt geändert: 19.8.2009 23:48:12 von census -
Hallo!
Danke für den Versuch, aber nun tut sich gar nichts mehr..... :/
Die breaks hatte ich rein gemacht, weil ist sonst immer, wenn ich 3x auf "Wasser" geklickt habe, dies als Ausgabe bekommen habe:
Bisher 1 verschiedene Utensilien eingekauft. Neues Element (Wasser) hinzugefügt! Array: Wasser - juhuu! Bisher 2 verschiedene Utensilien eingekauft. Dieses Element (Wasser) ist schonmal vorhanden! Neues Element (Wasser) hinzugefügt! Array: Wasser,Wasser - juhuu! Bisher 3 verschiedene Utensilien eingekauft. Dieses Element (Wasser) ist schonmal vorhanden! Dieses Element (Wasser) ist schonmal vorhanden! Neues Element (Wasser) hinzugefügt! Array: Wasser,Wasser,Wasser - juhuu!
Edit 2:
Ah okay, ich hab meinen Fehler gefunden! Hab alles in die For-Schleife gepackt. Nun geht es, aber die Zählung der Arrayelemente will nicht wirklich... Im Moment dürfte es ja maximal "2 verschiedene Utensilien" anzeigen aber geht bis 3...
listenlaenge = einkauf.length; var found = false; for(var i = 0; i<listenlaenge; i++) { if (neuesItem == einkauf[i]) { document.getElementById('einkaufswagen').innerHTML += "Dieses Element (" + neuesItem + ") ist schonmal vorhanden!<br />"; found = true; break; } } if ( ! found) { document.getElementById('einkaufswagen').innerHTML += "Neues Element (" + neuesItem + ") hinzugefügt!<br />"; einkauf.push(neuesItem); }
Edit 3:
Hab den Fehler beheben können. Hab bei der Ausgabe vorher immer "+1" bei der Arraylänge gerechnet, weil die Zählung sonst mit 0 begonnen hat. Wenn ich die Ausgabe aber unter den array.push()-Befehl packe und das "+1" entferne, zeigt es mir das ganze richtig an. :)
Beitrag zuletzt geändert: 20.8.2009 9:58:46 von nicole -
Haben deine Einkaufselemente eindeutige IDs oder bestehen die nur aus dem Zahlenstring? Ansonsten kannst du die ID des Einkaufobjekts als Array Index nutzen. Das bläht zwar das Array während des einkaufens ein, aber später beim absenden steht hinter der ID direkt die Anzahl des Items :) Oder man nutzt ein Hilfsarray das die IDs der bereits eingelagerten Dinge zwischenspeichert.
-
Schau mal, ob das hier das ist, was du suchst: http://census.lima-city.de/kart/
Durch Klick auf eine Frucht, fügst du sie deiner Bestellung hinzu.
Durch Klick auf eine Zeile in der Bestellung, nimmst du eine Frucht wieder weg.
Falls dir das hilft, kannst du meinen Code gern nehmen. -
Och Mensch, ich will doch alleine kniffeln! *g*
Habs mit der Arraydopplung nun alles wie oben beschrieben hinbekommen. Auch das Abwählen geht wunderbar.
Vielen Lieben Dank!!!
NIcole -
Wie sieht denn jetzt das gesamte Skript aus? Weil das Javascript noch Platz zur Verbesserung hat. ;) Zb. solltest du nach Möglichkeit globale Variblen die außerhalb der Funktion mit VAR definiert sind vermeiden. Solange auf der Website nur deine eigenen und wenige Skripte genutzt werden ist es ok, aber sobald du Fremdbibliotheken nutzen willst kann das zu Problemen führen.
-
Hier mein hart erarbeitetes Script klauen wollen, wa? *g* Aber gut... Ist ja eh nur eine persönlich gestellte Aufgabe ^^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Wir basteln uns einen Einkaufswagen</title> </head> <body style="font-family:Arial, Helvetica, sans-serif;"> <h1>Willkommen bei unserem Einkaufswagen!</h1><br /> Wählen sie ein Utensil:<br /> <br /> <a href="javascript: einkaufsliste('Steak');">Steak</a> | <a href="javascript: einkaufsliste('Wasser')">Wasser</a> | <a href="javascript: einkaufsliste('Müsli');">Müsli</a> | <a href="javascript: einkaufsliste('Apfelsaft')">Apfelsaft</a> | <br /> <a href="javascript: shopinhalt();">Shopinhalt anzeigen!</a> | <a href="javascript: shopessen();">Nur Essen</a> | <a href="javascript: shoptrinken();">Nur Trinken</a><br /><br /><br /> <br /> <div id="shopinhalt" style="background-color:#CECEFD; float:left; width:33%;"> </div> <div id="" style="background-color:#CECEFD; float:left; width:32%; margin-left:10px;"> <div id="einkaufsuebersicht"> XXXXX </div> <div id="einkaufsliste"> Bisher gekauft:<br /> <span id="einkaeufe"></span> <span id="esswert"></span> <span id="trinkwert"></span> </div> </div> <div id="einkaufsdaten" style="background-color:#CECEFD; float:right; width:33%; margin-left:10px;"> Daten:<br /><br /> </div> <script language="JavaScript" type="text/javascript"> //Grundwerte jedes Items var neuesItem; var art; var e; var t; //Zähler für Artikel var steakzaehler = 0; var wasserzaehler = 0; var mueslizaehler = 0; var apfelsaftzaehler = 0; var joghurtzaehler = 0; var kuchenzaehler = 0; var marmeladezaehler = 0; var sahnezaehler = 0; //Einpackverwaltung var einkauf = new Array(); //Shopdarstellung var shopliste = new Array; //Inhalte: 0:Name, 1:Art, 2:Esswert, 3:Trinkwert, 4:Anzahl shopliste[0] = new Array ("Apfelsaft", "Trinken", 0, 6, 0); shopliste[1] = new Array ("Müsli", "Essen", 2, 0, 0); shopliste[2] = new Array ("Steak", "Essen", 10, 2, 0); shopliste[3] = new Array ("Wasser", "Trinken", 0, 8, 0); shopliste[4] = new Array ("Apfel", "Essen", 4, 1, 0); shopliste[5] = new Array ("Kuchen", "Essen", 10, 4, 0); shopliste[6] = new Array ("Wassermelone", "Essen", 2, 10, 0); shopliste[5] = new Array ("Kaffee", "Trinken", 0, 2, 0); shopliste[6] = new Array ("Sprudel", "Trinken", 0, 3, 0); shopliste.sort(); //Datenweitergabe var esswert = 0; var trinkwert = 0; //Liste der in diesem Shop kaufbaren Dinge function shopinhalt() { document.getElementById('shopinhalt').innerHTML = "Folgendes ist in diesem Shop erhältlich:<br />"; for(var i = 0; i < shopliste.length; i++) { document.getElementById('shopinhalt').innerHTML += "<a href=\"javascript: einkaufsliste('" + shopliste[i][0] + "');\">" + shopliste[i][0] + "<br />"; } } //Liste der in diesem Shop kaufbaren Dinge (Essen) function shopessen() { document.getElementById('shopinhalt').innerHTML = "Folgendes ist in diesem Shop erhältlich:<br />"; for(var i = 0; i < shopliste.length; i++) { if(shopliste[i][1] == "Essen") { document.getElementById('shopinhalt').innerHTML += "<a href=\"javascript: einkaufsliste('" + shopliste[i][0] + "');\">" + shopliste[i][0] + "<br />"; } } } //Liste der in diesem Shop kaufbaren Dinge (Trinken) function shoptrinken() { document.getElementById('shopinhalt').innerHTML = "Folgendes ist in diesem Shop erhältlich:<br />"; for(var i = 0; i < shopliste.length; i++) { if(shopliste[i][1] == "Trinken") { document.getElementById('shopinhalt').innerHTML += "<a href=\"javascript: einkaufsliste('" + shopliste[i][0] + "');\">" + shopliste[i][0] + "<br />"; } } } //Wenn ein Artikel zum Kauf angewählt function einkaufsliste(neuesItem) // neuesItem ^= Utensil { //Arrayverwaltung var schonvorhanden = false; for(var i = 0; i < shopliste.length; i++) { //Wenn Item einem Teil im Array entspricht (Item schon in Array) dann alles okay if(neuesItem == einkauf[i]) { schonvorhanden = true; break; } } //Wenn Vari noch immer auf false (Item nicht in Array), dann in Array rein if(! schonvorhanden) { einkauf.push(neuesItem); } //Geordnete Ausgabe des Einkaufs einkauf.sort(); einkaufausgabe = einkauf.join(", "); document.getElementById('einkaufsuebersicht').innerHTML = "Auf der Einkaufsliste: <b>" + einkaufausgabe + "</b><br />"; //Weiterverwertung und Ausgabe nahrungsverwertung(neuesItem); anzahlausgabe(neuesItem); } //Anzahlenverwaltung function anzahlausgabe(neuesItem) { for(var i = 0; i < shopliste.length; i++) { if (neuesItem == shopliste[i][0]) { shopliste[i][4] += 1; } } document.getElementById('einkaeufe').innerHTML = ""; for(var x = 0; x <= shopliste.length; x++) { if (shopliste[x][4] != 0) { document.getElementById('einkaeufe').innerHTML += shopliste[x][4] + "x " + shopliste[x][0] + " (Esswert: " + shopliste[x][2] + "; Trinkwert: " + shopliste[x][3] + ") <a href=\"javascript: anzahlenabzug('" + shopliste[x][0] + "');\">ABZIEHEN</a><br />"; } } } function anzahlenabzug(neuesItem) { //Anzahl und Trink- und Esswert dezimieren for(var i = 0; i < shopliste.length; i++) { if (neuesItem == shopliste[i][0]) { shopliste[i][4] -= 1; einkauf = einkauf.splice(i, 1); var essen = parseInt(shopliste[i][2]); esswert -= essen; var trinken = parseInt(shopliste[i][3]); trinkwert -= trinken; } } einkauf.sort(); einkaufausgabe = einkauf.join(", "); document.getElementById('einkaufsuebersicht').innerHTML = "Auf der Einkaufsliste: <b>" + einkaufausgabe + "</b> TUTUTT<br />"; document.getElementById('esswert').innerHTML = "Esswerte: " + esswert; document.getElementById('trinkwert').innerHTML = "Trinkwerte: " + trinkwert; if (esswert <= 0 && trinkwert <= 0) { document.getElementById('esswert').innerHTML = ""; document.getElementById('trinkwert').innerHTML = ""; } //Neue Ausgabe der Werte document.getElementById('einkaeufe').innerHTML = ""; for(var x = 0; x <= shopliste.length; x++) { if (shopliste[x][4] != 0) { document.getElementById('einkaeufe').innerHTML += shopliste[x][4] + "x " + shopliste[x][0] + " (Esswert: " + shopliste[x][2] + "; Trinkwert: " + shopliste[x][3] + ") <a href=\"javascript: anzahlenabzug('" + shopliste[x][0] + "');\">ABZIEHEN</a><br />"; } } } //Funktion zur Variablenweitergabe function nahrungsverwertung(neuesItem) { for(var i = 0; i < shopliste.length; i++) { if (neuesItem == shopliste[i][0]) { document.getElementById('einkaufsdaten').innerHTML += "Variabeln: Itemname = " + shopliste[i][0] + ", Art des Items = " + shopliste[i][1] + ", Esswert = " + shopliste[i][2] + ", Trinkwert = " + shopliste[i][3] + "<br />"; var essen = parseInt(shopliste[i][2]); esswert += essen; var trinken = parseInt(shopliste[i][3]); trinkwert += trinken; } } document.getElementById('esswert').innerHTML = "Esswerte: " + esswert ; document.getElementById('trinkwert').innerHTML = "Trinkwerte: " + trinkwert ; } </script> </body> </html> -
Hehe, nein. Keine Panik. Ich will nur mal schauen in wie weit man die globalen Variablen auf eine einzige reduzieren kann. Mach das nebenbei mal auf der Arbeit, kann also mit dem Ergebnis etwas dauern ^^"
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage