JavaScript Problem, ich komm kein Stück weiter?

Ich wollte ein Programm schreiben, welches mit bei der Zusammenstellung der Einkaufsliste helfen soll.

Wenn ich auf den Button Drücke spuckt er mir unten aus, was auf meine Einkaufsliste muss, soweit so gut. Ich weiß aber nicht, wie ich JS dazu bringe, dass er mir die variablen zusammen und eine komplette Einkaufsliste ausspuckt.

Ich glaube, dass ich dafür auch schon an den variablen Fehler begangen habe, die Anzahl der Zutaten sind auch als String gespeichert. Falls ich das ändern müsste, wäre ein Denkanstoß in die richtige Richtung sehr nett.

Euch allen ein riesen Danke

hier der Code:

https://jsfiddle.net/4d7mfn18/

3 Antworten

Von Experte BeamerBen bestätigt

Berny96

21.02.2023, 15:37

Hier ein simpler Vorschlag:

Nutze ein Array der alle benötigten Zutaten als Auflistung speichert sprich:

let benoetigteZutaten = []

Wenn du dann auf ein Button clicks dann soll dieser Array einfach befüllt werden mit den Zutaten, Beispiel:

benoetigteZutaten.push("apfel", "apfel", "zucker")
// benoetigteZutaten hat dann folgenden Inhalt
// ["apfel", "apfel", "zucker"]

Wenn du nochmal auf diese Mahlzeit Klicken solltest dann würde dein Array wie folgt aussehen:

// benoetigteZutaten hat dann folgenden Inhalt
// ["apfel", "apfel", "zucker", "apfel", "apfel", "zucker"]

Da es nur ein Denkansatz ist, kannst du selber heraus finden wie du jetzt die allgemeine Einkaufsliste aufbaust anhand deines Arrays. Apfel steht jetzt 4x drin, sprich du musst:

Anzahl an Zutaten zählen und merken
Anhand der gezählten Zutatenliste dann deine Einkaufstliste aufbauen (als string von mir aus)

Woher ich das weiß:Berufserfahrung – Beruf, Schule, Hobby und eigene Erfahrungen

Babelfish

21.02.2023, 16:00

Wobei das Zählen den Zutaten eher nicht der richtige Ansatz ist. Das könnte bei 500 g Zucker schon mühselig werden.

Statt einem String würde ich pro Zutat ein Objekt nutzen:

let apfel = {
  title: "Apfel",
  unit: "Stück",
  quantity: 2,
};

let zucker = {
  title: "Zucker",
  unit: "Gramm",
  quantity: 250,
};

Berny96

21.02.2023, 16:01

@Babelfish

Ja, es gäb viele bessere Ansätze. Für einen Anfänger aber könnte es ein wenig überfordert sein schon mit Objekten zu arbeiten. War halt nur ein Ansatz, dein Weg wäre definitiv schon mal ein großer Schritt weiter

wandererds

Beitragsersteller

21.02.2023, 15:39

Super, danke. Ich freu mich über jeden Ratschlag, der mich ans Ziel bringt

BeamerBen

21.02.2023, 16:22

An deiner Stelle würde ich die Zutaten in einer Variable in einem Objekt bzw. Map speichern.

Dh. du speicherst unter einem Key z.B. Apfel einen Wert, in dem Fall kann das die Anzahl sein. Später eventuell wie Babelfish vorschlägt eventuell auch einen String mit der Einheit.

Sobald auf einen Knopf gedrückt wird aktualisierst du dann deine Map/Dictionary/Objekt/whatever und generierst dir aus dieser Key Value Zuweisung über eine Schleife, reduce oder ähnliches einen String den du anzeigen kannst.

mehr über Maps findest du hier:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

eventuell kann ich dir n Beispiel schreiben wenn du es nicht hinbekommst aber gerade zu faul.

Der Vorschlag von Berny96 mit einem Array ist auch nicht so schlecht, hier ist nur der Nachteil, dass du dann eventuell zwei mal "Apfel" auf deiner Liste stehen hast und zu zählen wie oft Apfel auf der Liste steht oder ähnliches wäre etwas nervig.

ITgirlde

18.03.2023, 22:15

wenn du weiter Javascript lernen möchtest, kann ich dir dieses kostenlose Spiel empfehlen:
https://itgy.de/schulungen/scriptfighter-javascript-lernspiel/

Ähnliche Beiträge

JS variablen in Html ausgeben, wobei die Javascript Datei eigenständig ist?

Wir bräuchten eine Lösung um unsere durch eine API generierten Daten auf unserer HTML Seite auszugeben.

Wir haben zum Beispiel ein let test = "Irgendwas" in der JS Datei und wir wollen den String in der HTML Datei ausgeben bzw auf der Website anzeigen lasse. Also es wird keine JQuery verwendet und die Daten liegen einfach als String vor.

...zum Beitrag

Javascript + CSS animation will nicht funktionieren?

Hallo,

ich kann mir vorstellen, dass hier so einiges falsch ist. Es geht hauptsächlich um die drei letzten Klassen im CSS und um den kompletten JS Code. Ich will, dass die box auf der linken Seite und der Container unterm HR rein sliden.

Weil des Code etwas lang ist hab ich das auf jsfiddle gespeichert:

https://jsfiddle.net/damvn6wy/26/

danke im voraus.

...zum Beitrag

Einkaufsliste JavaScript mehrere Einträge?

Hallo, ich bin noch Anfänger im Programmieren und hätte eine Frage: wie kann ich mehrere Einträge in die UL packen? Bis jetzt geht nur ein Eintrag. Und wenn ich einen neuen hinzufügen will dann wird der alte gelöscht.

Tut mir leid für die dummen variablen Namen xD

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <input type="text" name="kaufen" id="test">
    <button id="btn">Hinzufügen</button>
    <ul id="list"></ul>
<script>
const hinzufügenbtn = document.getElementById("btn");
 hinzufügenbtn.addEventListener("click", function(){
   const add =  document.getElementsByName("kaufen")[0].value;
    const  tt = document.getElementById("list").innerHTML = add;
 })
</script>
</body>
</html>

...zum Beitrag

HTML JavaScript Variable untereinander?

Ich habe eine Variable namens data wo mehrere Sachen drinnen sind. Diese will ich jetzt untereinander ausgeben siehe Quellcode:

document.getElementById('Ausgabe').innerHTML = data;

Sie werden aber nur nebeneinander ausgegeben ein Split hat auch nicht geholfen irgendwelche ideen? Ja es ist ein String nur leider hilft ein Split nicht da dieser sonst nur überschreibt

...zum Beitrag

javascript und css kombinieren?

Ich will eine Stecknadel an der stelle setzen lassen wo man klickt weiß aber nicht wie ich meine x und y variablen in css einsetzen kann, oder gibt es einen weg css in js zu benutzen?

...zum Beitrag

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zum Beitrag

Javascript Datei senden?

Hallo,

angenommen ein Javascript liest bestimmte Werte und speichert diese als String in einer Variablen, wie kann ich diese Variable dann versenden(vom Browser des Nutzer) zu mir?

...zum Beitrag

Rechnung mit Javascript?

Vorweg: Ich bin noch ziemlich unerfahren, was JS betrifft

Ich habe einen Button auf einer HTML Seite. Ich würde es gerne so machen, dass, wenn man auf den Button drückt, einer Variable immer um eins steigt (Halt, dass der Variable 1 dazu gerechnet wird)

Beispiel: Button einmal gedrückt, Variable = 000.001

Button nochmal gedrückt, Variable = 000.002

Button 23 mal gedrückt, Variable = 000.023 usw..

Diese Variable soll dann auch auf dem Bildschirm angezeigt werden. Kann mir wer helfen?

Das ist momentan mein Code:

Danke im Voraus

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rechnung</title>
    </head>
    <body>
        <button onclick="addition()">Drücke hier</button>
        <div id="Ergebnis">000.000</div>
    </body>
    <script>
        let Ergebnis

        function addition (){
            Ergebnis += 1;
        }
    </script>
</html>

...zum Beitrag

Wie kann ich das Ergebnis einer for-schleife in einer Variable speichern? (Javascript)

Hallo! Frage dürfte eigentlich klar sein. Ich will das Ergebnis meiner for-schleife in einer variable speichern. Also meine schleife gibt einen string x mal aus (AAA z.B.). Diesen String möchte ich dann in var speichern.. Meine idee lautete so:

for(var i = 0; i < 3; i++) {
    var s = (p)Hallo(/p);
  }

aber so funktioniert es nicht... in der variable sollte dann stehen:

Hallo

Hoffentlich kann mir jemand weiter helfen

...zum Beitrag

Variable in einer JS Funktion beim call um 1 erhöhen?

Wie der Titel schon sagt habe ich eine Funktion mit einer Variable die sich bei jedem call der Funktion um eins erhöhen soll. Programmsprache: JavaScript.

Habe leider keine Ahnung wie ich eine Variable in einer Funktion jedesmal erhöhe ohne sie auch jedesmal davor neu zu definieren.

Ich arbeite in HTML und das Skript ist ein Teil der Seite.

Würde mich über ein Bsp freuen, da ich kaum mit JS arbeite es hier aber mit Python nicht geht

...zum Beitrag

Javascript Variable an PHP übergeben? AJAX

Hallo Leute,

Ich würde gerne Javascript Variablen an PHP übergeben.

Ich habe es bisher über die URL gemacht, aber das ist weit weniger elegant als ich es mir wünsche.

Nach einer Internet Recherche habe ich etwas gefunden von AJAX und das man damit in der Lage ist, eine JS Variable an PHP zu übergeben. Nur wie?

...zum Beitrag

Javascript Variable in PHP Variable speichern?

Liebe Community,

Ich habe in JS eine Variable welche ich in PHP benutzen will, um den Inhalt einer Datei zu verändern. Mein PHP Code sieht so aus:

<?php
if (isset($_GET["data"])) {
    $stuff = "<script>document.write(JSON.stringify(scripts));</script>";
    echo $stuff;
    $newfilecontent = $stuff;
    file_put_contents("scriptlist.js", "let scripts = " . $newfilecontent);
}
?>

Das echo funktioniert also es wird die Variable angezeigt, in die Datei wird allerdings nicht die JS Variable gepackt, sondern der Text <script>document.write(JSON.stringify(scripts));</script>

Wie kann ich das vermeiden sodass auch dort das gleiche wie beim echo eingefügt wird?

Viele Grüße Koner

...zum Beitrag

JS : Variablen Name mit Variable definieren möglich?

Hallo,

ich versuche gerade in JavaScript eine Variable zu erstellen.

Diese Variable soll mit einer anderen Varibale definiert werden, dass heißt

Ich will einen Namen z.B. hallo und dann habe ich noch eine Zählervariable i.

Bei jedem Durchlauf einer Schleife, wird i um eins erhöht und ich möchte dann, dass je nachdem wie oft die Schleife durchläuft so viele Variablen definiert werden, die dann heißen :

hallo1

hallo2

hallo3

...

Wie oft die Schleife durchlaufen soll ist vorher nicht vorgegeben, es soll funktionieren, egal wie oft die Schleife durchläuft.

Weiß jemand von euch eine Antwort auf mein Problem ?

LG white

...zum Beitrag

Zahl als Zahlwort (String) ausgeben Javascript?

Wie kann man in JS eine gegebene Zahl in ihr jeweiliges Zahlwort umwandeln?
Als Beispiel: Es wird eine 3 gegegben und die Methode soll nun "drei" zurückgeben... Wie geht das?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen