Javascript - leere Variable prüfen?
Ich habe die letzten Tage angefangen, mich mit Programmierung in HTML und Javascript zu befassen, die ersten Dinge sind auch gelaufen, aber jetzt stehe ich vor einem Problem, wo mir weder youtube noch Google Suche ein Ergebnis liefern konnten, das funktionierte, wahrscheinlich ist es trotzdem einfach aber ich komme nicht drauf:
Ich möchte eine Art Checkliste erstellen, aus einem Eingabefeld soll ein Text ins nächste freie Feld eingefügt werden, dazu muss ich (nach meinem Kenntnissstand, was ich bisher gemacht habe, und was funktionierte, ohne mich dazu zusätzlich belesen zu haben), über if... else Bedingungen nacheinander prüfen ob die vorherigen Felder (text1, text2, text3... jeweils eine eigene Variable) leer sind, um das dann entweder in das Feld einzufügen oder das nächste zu prüfen...
Wenn alle verfügbaren Felder gefüllt sind, soll beim Versuch, die Eingabe zu machen in einem extra Feld eine Meldung kommen "Liste voll", bei meinen bisherigen Versuchen, obwohl kein Feld belegt ist, springt das Programm sofort zu diesem Punkt, stellt also offensichtlich nicht fest, dass die Variablen der vorherigen Felder noch NICHT belegt sind
(Das gleiche soll dann passieren, wenn ein Punkt erledigt ist, jeweils über einen Button soll dieser Punkt entfernt werden und falls nachfolgende Felder belegt sind, diese jeweils nachrücken (also wenn das nachfolgende Feld belegt ist, den Inhalt dieser Variable übernehmen, sonst Variable leeren))
2 Antworten
Hab's dir mal kurz programmiert, wie ich es machen würde.
Als HTML-Struktur habe ich mich für folgendes entschieden, ich hoffe mal so hast du das auch ungefähr gemeint:
<input id="itemInput" placeholder="New Item...">
<button onclick="addItem()">Add</button>
<ul id="itemList">
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
<li><span></span><button>X</button></li>
</ul>
<p id="errors"></p>
Einfach eine <ul> mit List-Items, wobei jedes List-Item einen <span> hat, der dann den Text enthält, und einen <button> hat, der zum Löschen des Eintrags dient.
Um das erste leere Listen-Element zu finden, habe ich einfach einen CSS-Selektor benutzt:
document.querySelector("#itemList>li>span:empty")
Falls dies nicht gefunden werden kann, schreibe ich in das <p>-Element, welches zur Fehler-Anzeige dient, die Nachricht "Liste voll!".
Um beim "Löschen" eines Eintrags alle folgenden Elemente um eins nach oben zu verschieben, lösche ich einfach den Text des Elements und verschiebe es dann ans Ende der Liste. Den Rest macht HTML von alleine:
el.parentElement.firstChild.innerText="";
document.getElementById('itemList').appendChild(el.parentElement);
Außerdem entferne ich die "Liste voll!" Nachricht, sobald man ein Element löscht. Denn dann ist die Liste ja nicht mehr voll.
Hier eine Live-Demo: https://jsfiddle.net/supLom14/1/
Hoffe ich konnte dir damit helfen, sag bescheid wenn du Fragen hast.
Falls ich dir was erklären soll oder wo helfen soll sag bescheid, hab auch Discord usw.
if (!str) //str ist leer
Bevorzuge ich anstelle von codinghelp's Anwort, da es viel kürzer ist.
ob die vorherigen Felder (text1, text2, text3... jeweils eine eigene Variable)
Du solltest dir mal Arrays anschauen.
Wie gesagt, ich habe es zuerst anhand des bisherigen Wissens versucht.
Ich habe erst vor ein paar Tagen (wieder... hab es seit der 11. Klasse oder so nicht mehr gemacht) damit angefangen
Cool, danke, ich werde das mal so versuchen.
Das das Liste voll Item verschwindet hatte ich auch so gedacht und eigentlich auch schon so vorbereitet, bisher scheiterte es halt an den Bedingungen