Html liste speicher und adden?
Hallo, ich habe mir vorgenommen eine Einkaufsapp zu machen mit html. Ich frage micht nur wie ich eine Liste erstellen kann. Also ich möchte in einer html datei eine Liste haben und wiedergeben können, dazu soll man zur Liste auch sachen hinzufügen können. Dann soll die Liste aufgelistet werden.
3 Antworten
Für eine Auflistung eignet sich das ul-Element.
<ul id="list">
<li>Some entry</li>
</ul>
<input id="input">
<button id="add-button">Add</button>
Einträge kannst du via JavaScript hinzufügen.
const ul = document.getElementById("list");
const input = document.getElementById("input");
document.getElementById("add-button").addEventListener("click", () => {
const li = document.createElement("li");
li.textContent = input.value;
ul.appendChild(li);
});
Beachte, dass die Änderungen an der Liste in diesem Fall nicht persistent wären und nur dem Seitenbesucher selbst sichtbar sind (nicht aber anderen).
Ersteres könnte man via Cookie oder Web Storage lösen (die Listendaten werden also vom Browser gespeichert).
Wenn du hingegen die Anforderung hast, dass jeder Seitenbesucher dieselbe Liste sehen kann, müsstest du die Daten auf einem zentralen Server speichern (sei es in einer Textdatei oder einer Datenbank). Bei Seitenaufruf muss diese Datenquelle ausgelesen und der entsprechende HTML-Code generiert werden. Das Lesen und Speichern erfolgt also über eine serverseitige Anwendung. Je nachdem, über welchen Webserver deine Webseite ausgespielt wird, könntest du hier auf PHP, JavaScript, C#, o.ä. Programmiersprachen zurückgreifen.
Bleiben die einträge dann temporär oder werden sie geschpeichert
Das geht mit HTML nicht, HTML kann nur fest vorgegebene Inhalte darstellen. Soll der Nutzer die Inhalte verändern können, dann benötigst du JavaScript, falls sie serverseitig gespeichert und dann vom Nutzer geladen werden sollen, dann auch PHP.
Hallo,
geht so nicht. Nutz ein Framework wie VueJS. Dann kannst du es auch machen. Die Einkaufsliste wär ein einfaches JSON Object.
In VueJS HTML kannst du auch for Schleifen machen.
Wär vielleicht schlau erstmal Vanilla JS zu lernen bevor man mit einem Framework arbeitet.
Beides geht natürlich auch in Vanilla JS, dafür ist kein Framework nötig.
VanillaJS wird nicht in der Indrustrie verwendet. Würde direkt das richtige erlernen. Aber mach was du willst.
Um 'das Richtige' zu lernen sind Vanilla JS Kenntnisse aber angebracht
Genau wie es wenig Sinn macht direkt tailwind zu lernen ohne etwas über css zu wissen.
Tatsächlich ja, aber NodeJS vereinfacht viele Dinge, die dann unnötig erlernt sind in VanillaJS
Das ist projektabhängig, ob man es bei VanillaJS belässt oder auf zusätzliche Bibliotheken/... zurückgreift.
Natürlich kommt es auf das Projekt an, man kann natürlich alles Vanilla machen. Aber Frameworks bieten dir sehr viele Features (Egal ob kleines Projekt).
Das Frameworks diverse Features bieten (das sollte jedenfalls die Erwartungshaltung sein, andernfalls wären sie wohl nutzlos) habe ich nicht in Abrede gestellt. 😉
@regex9 Und um sie zu speichern brauche ich PHP?