JS : Fehler bei Visualisierung von Input Array?
Hallo liebe Community,
ich habe eine kleine Website umgesetzt, bei der man in einem Input Formular etwas eingibt und dann klickt man auf einen Knopf und das eingegebene wird in einem HTML Listenelement dargestellt. Der Input wird im Local Storage des Browsers gespeichert.
Mein Bug :
Beim klicken des Buttons wird der eingegebene Text nicht als ganzes in einem Listenelement dargestellt, sondern jeder Buchstabe in eine Element gesetzt.
Mein Code :
HTML :
PS : Leider ist de Code zu lang um ihn hier einzufügen.
LG white
Danke für jeden der sich das hier ansieht und versucht mir zu helfen
PS :
Bug 2 :
Mehr als ein Element läst sich nicht hinzufügen, es kommt eine Fehlermeldung
(index.js:115 Uncaught TypeError: self_aded_values.push is not a function
at addItem (index.js:115:22)
at HTMLFormElement.onsubmit (choose_skills.html:61:43))
1 Antwort
1) Der Local Storage speichert nur Strings. Zu deinem Array wird also beim Speichern erst ein String-Wert gebildet und der dann serialisiert.
const arr = [ "Hello", "world" ];
localStorage.setItem("my_array", arr);
console.log(localStorage.getItem("my_array")); // "Hello,world"
Du könntest den String erst anhand des Trennzeichens (Komma) wieder in ein Array auftrennen
const data = localStorage.getItem("my_array").split(",");
console.log(data[0]); // Hello
oder du nutzt von Anfang an ein Format wie JSON zur Serialisierung.
const arr = [ "Hello", "world" ];
localStorage.setItem("my_array", JSON.stringify(arr));
const data = JSON.parse(localStorage.getItem("my_array"));
console.log(data[0]); // Hello
2) Die Variable self_aded_values ist global und du überschreibst ihren Wert in load_array_self. Wie schon oben erwähnt, speichert der Local Storage nur Strings. Daher weist du in der ersten Zeile des Funktionskörpers der Variable einen String zu, welcher wiederum beim nächsten Aufruf von addItem keine push-Methode kennt.
Noch ein paar weitere Punkte:
1) Es wäre gut, einen einheitlichen Stil beim Benennen der Variablen und Funktionen zu verwenden. Aktuell mischt du snake_stil und camelCase wild durcheinander. Des Weiteren beinhalten einige Bezeichner Rechtschreibfehler (self_added_values, length_array).
2) Bezüglich der gewählten CSS-Klassen solltest du beachten, dass diese nicht mit einer Zahl beginnen dürfen. Außerdem gibt die add-Funktion (schau in deine Schleife) keinen konkreten Wert zurück. In addClass_value wird daher immer der Wert undefined gespeichert.
3) Wenn du im Grunde nur das a-Element befüllen möchtest, welches du zuvor erstellst, wäre es besser, entweder mit createElement zu arbeiten
const link = document.createElement("a");
link.innerText = // ...
link.classList.add(/* ... */);
// etc. ...
yourLinkContainer.appendChild(link);
oder erst alle Werte zu sammeln und dann eine String-Interpolation durchzuführen.
const cssClass = // ...
const linkText = // ...
const linkHtml = `<a href="#" class="${cssClass}">${linkText}</a>`;
yourLinkContainer.innerHTML = linkHtml;
4) Ist die statisch fixierte Beschränkung, wie oft die Schleife wiederholt werden soll, eigentlich Absicht? Sie läuft immer nur bis 2, obwohl dein Array doch eine flexible Länge haben könnte, die sowohl unter, als auch über 2 liegen könnte. Im ersteren Fall würdest du versuchen, auf nicht existierende Elemente zuzugreifen.
Danke für deine tolle und super hilfreiche Antwort. Zu Punkt 4 ja ist es. Hab das nur Mal zum testen reingebracht. Danke für deine tollen Tips
LG white