nicht angemeldet
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
Camping_RIDER