(Anfänger-Problem) Speichern von Daten / Neue Elemente erstellen
0 0 
dedlfix
0 
Camping_RIDER
0
(Anfänger-Problem) Speichern von Daten / Neue Elemente erstellen
Hallo liebe SELFHTML Community,
das Webseiten programmieren hat mich nun auch gepackt und ich bin gerade dabei meine ersten praktischen Versuche mit Javascript durchzuführen. Als Editor nutze ich Brackets.
Zurzeit lese ich das Buch "HTML5 Programmierung von Kopf bis Fuß", habe aber bei einem Javascript Beispiel ein Problem.
Tun soll es folgendes: Den eingegebenen Text vom <input> Text-Element bei Betätigung des Buttons als neues <li> Element an das <ul> Element anhängen und im LocalStorage zwischenspeichern. (in der Übung geht es hauptsächlich um das verwenden von Handlern)
Machen tut es aber nichts.
Brackets gibt viele JSLint Error Codes aus, die ich bei Bedarf nachreiche, hier sind erstmal die Quellcodes.
HTML-Code:
<!doctype html>
<html lang="de">
<head>
<title>webvilleTunes</title>
<meta charset="utf-8">
<link rel="icon"
type="image/ico"
href="http://wickedlysmart.com/favicon.ico">
<script src="wiedergabeliste_speichern.js"></script>
<script src="wiedergabeliste.js"></script>
<link rel="stylesheet" href="wiedergabeliste.css">
</head>
<body>
<form>
<input type="text" id="songTextInput" size="40" placeholder="Songtitel">
<input type="button" id="buttonHinzufuegen" value="Hinzufügen">
</form>
<ul id="wiedergabeliste">
</ul>
</body>
</html>
Javascript "wiedergabeliste_speichern.js"
function speichern(element) {
var listenArray = speicherArrayAbrufen("wiedergabeliste");
listenArray.push(element);
localStorage.setItem("wiedergabeliste", JSON.stringify(listenArray));
}
function wiedergabelisteLaden() {
var listenArray = gespeicherteSongsLaden();
var ul = document.getElementById("wiedergabeliste");
if (listenArray != null) {
for (var i = 0; i < listenArray.length; i++) {
var li = document.createElement("li");
li.innerHTML = listenArray[i];
ul.appendChild(li);
}
}
}
function gespeicherteSongsLaden() {
return speicherArrayAbrufen("wiedergabeliste");
}
function speicherArrayAbrufen(schluessel) {
var listenArray = localStorage.getItem(schluessel);
if (listenArray == null || listenArray == "") {
listenArray = new Array();
}
else {
listenArray = JSON.parse(listenArray);
}
return listenArray;
}
Javascript "wiedergabeliste.js"
window.onload = init;
function init() {
var button = document.getElementById("buttonHinzufuegen");
button.onclick = buttonClickHandler;
wiedergabelisteLaden();
}
function buttonClickHandler(e) {
var textInput = document.getElementById("songTextInput");
var songTitel = textInput.value;
//alert("F¸ge " + songTitel + " hinzu");
if (songTitel == "") {
alert(" Bitte geben Sie einen Song ein");
}
else {
//alert("F¸ge " + songTitel + " hinzu");
var li = document.createElement("li");
li.innerHTML = songTitel;
var ul = document.getElementById("wiedergabeliste");
ul.appendChild(li);
// f¸r Code-Fertiggericht
speichern(songTitel);
}
}
Die CSS Datei spar ich mir hier mal.
Hoffe ihr könnt mir helfen, da ich erst am Anfang bin fallen mir die Fehler nicht so auf wie bei euch alten Hasen ;)
MfG
-
Was ich noch anmerken wollte: Habe es mit Firefox, Chrome und Safari bei aktiviertem Javascript und Rest (Cache, Cookies etc.).
Sobald ich etwas eingebe und den Button betätige, ist das Feld wieder leer und hinter die .html Endung wird ein Fragezeichen gestellt. -
Tach!
Tun soll es folgendes: Den eingegebenen Text vom <input> Text-Element bei Betätigung des Buttons als neues <li> Element an das <ul> Element anhängen und im LocalStorage zwischenspeichern. (in der Übung geht es hauptsächlich um das verwenden von Handlern)
Machen tut es aber nichts.Zum Fehlersuchen nimmt man einen Debugger, wenn vorhanden, ansonsten macht man Kontrollausgaben der Werte in den Variablen und vergleicht dann Wunsch und Wirklichkeit. Alle aktuellen Browser haben eingebaute Webentwickler-Tools. Setze Breakpoints an die Stellen, an denen du meinst, dass die Ausführung in deinem Code vorbeikommen muss. Prüfe die Variableninhalte, was meist schon mit Mausdraufhalten geht. Kontrollausgaben gehen mit console.log(delinquent).
Versuch mal so die Ursache zu finden.
dedlfix.
-
Aloha ;)
Kann mich nur dedlfix anschließen, benutze zunächst die Entwicklertools!
Ich meine mich übrigens erinnern zu können, dass wir hier vor 1-2 Monaten einen Thread hatten, in dem es darum ging, dass localStorage bei offline-Projekten (i.e. Aufruf über file:// statt über http://-Server) nicht ordentlich funktionierte oder nicht zur Verfügung stand. Betraf vor allem aber glaube ich den Internet Explorer...
Sollte das der Fall sein, sollte es dir aber in der JavaScript-Konsole in den Entwicklertools eine entsprechende Fehlermeldung ausspucken, sobald du zugreifen willst.
(Nachtrag: Ich hab den Thread inzwischen im Archiv wiedergefunden, vielleicht bringt er neue Erkenntnis...)
HTML-Code:
Kleine Anmerkung: Über dem Eingabefeld haben wir so coole Code-Umgebungen ;) Wenn man die um sein Geschribsel drumrumsetzt, bekommen die User Syntaxhighlightning und ordentliche Hervorhebung. Nur als Tipp ;)
Und dann noch eine kleine Anmerkung - weil du ja grad am lernen bist, besser gleich lernen wie mans richtig macht:
window.onload = init;
button.onclick = buttonClickHandler;
Das ist eine legitime Möglichkeit. Allerdings fehleranfällig und veraltet. Kurz zur Historie: Am Anfang gabs die Event-Handler per Attribut im HTML-Quelltext. Die sind zurecht zu meiden, da es nichts gutes bringt, HTML und JavaScript zu mischen. Dann kam die Methode, die du hier benutzt hast. Besser als per Attribut, aber immer noch mit Nachteilen behaftet. Stell dir vor, du hast zwei unabhängige Skripte, die sich beide in window.onload einhängen müssen. Sie würden sich gegenseitig überschreiben und nur eins würde ausgeführt. Zu meinen Anfangszeiten gabs nichts anderes und man hat sich dann damit beholfen, dass man grundsätzlich immer zuerst die eventuell vorher eingespeicherte Funktion in einer Variable zwischengespeichert und dann am Ende der eigenen Funktion ausführen lassen hat, bevor man den Eventhandler neu 'belegt' hat. Eine ätzende Prozedur. Inzwischen gibts was besseres: Die Funktion addEventListener, über die jedes DOM-Element verfügt, bietet die Möglichkeit, beliebig viele "Event-Handler" zu registrieren ohne, dass sich diese gegenseitig überschreiben. Das ist die Methode, die inzwischen für die Registrierung von Event-Handlern immer gewählt werden sollte.
In deinem Fall wären das:
window.addEventListener('load',init); button.addEventListener('click',buttonClickHandler);Hoffe ihr könnt mir helfen, da ich erst am Anfang bin fallen mir die Fehler nicht so auf wie bei euch alten Hasen ;)
Hoffe, das war hilfreich ;)
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
Erstmal ein riesen Dankeschön an dedlfix und Camping_RIDER, eure Denkanstöße haben mir sehr geholfen!
Habe um ehrlich zu sein den Debugger noch nie richtig verwendet, da er mir zu kompliziert schien. Aber nachdem ich mich jetzt mal intensiever mit ihm befasst habe, habe ich gemerkt was für ein super Werkzeug er ist, da man jeden Schritt des Scripts logisch nachvollziehen kann.
Hab die Projekt Datein anschliesend auf einen Server geladen und dann lief alles einwandfrei!
Die Funktion addEventListener ist mir neu, danke das du mich darauf Aufmerksam gemacht hast!
Gut zu wissen, das man es auch auf diese Weise lösen kann.Mit freundlichen Grüßen