---------------------------------------------------------------VORSTELLUNG----------------------------------------------------------------
Einen schönen guten Tag an das CB Forum! Ich habe hier keinen Vorstellungsthread gefunden, deshalb stelle ich mich hier mal kurz vor bevor ich mit der Frage beginne. Ich bin der Marc 27 Jahre alt und komme aus der Region um Hannover rum. Hobbymäßig lerne ich zurzeit JavaScript und lese hier gerne in den Hardware Bereichen mit um bisschen was an Wissen mitzunehmen.
Auf ein gutes miteinander
---------------------------------------------------------------VORSTELLUNG ENDE---------------------------------------------------------
Ich habe 3 folgende Problem was mich ziemlich dumm fühlen lässt und langsam schon herunterzieht.
1. Das eingeben und das erzeugen der Listeneinträge to Do's klappt. Sobald ich die Seite aber neu lade verschwindet der "check" Status und bei neuer Eingabe verschwinden die vorherigen Einträge unter CheckList und es steht nur noch der aktuell eingegebene Punkt da, der die vorherigen 2 verschwinden lassen hat.
Nach meinen Gedanken ist das Problem, dass sich "i" nach jedem neu Laden auf 0 bzw. nicht deklariert zurücksetzt und ich per if Abfrage sobald userInputStorage "true bzw. nicht mehr null" ist dann für i den Wert von closeBtn.length nehme, da diese ja immer die aktuelle Länge der Liste hat und sich nach dem neu Laden nicht zurücksetzt. Nur funktioniert leider nicht.
Ist meine Annahme aber richtig das ich eine zweite Option per if nach dem neu Laden einbringen muss die dann die aktuelle Länge der Liste berücksichtigt? Wie schaffe ich es nach dem neu Laden die Liste fließend weiter fortzuführen?
2. Wenn ich einen Listeneintrag "removen" möchte werden geich alle Einträge "removed" + dem "ul bzw. #toDoList" Tag aus der HTML Datei.
Ich vermute daran das meine <li> tag nicht an die "ul bzw #toDoList" angehängt ist doch wenn ich das mit #toDoList.append(li); versuche funktioniert es nicht.
Ist diese Annahme auch richtig und nur mein Horizont zu begrenzt um es richtig umzusetzen?
3. Ist das Problem das sich der "checked" Status eines Listeneintrags nach jedem neu Laden zurücksetzt. Muss ich diesen auch im localStorage speichern und falls ja wie?
Ich habe schon sovieles mit verschiedensten Annahmen probiert aber bin jedes mal gescheitert außerdem ist mein Gehirn so oft geplatzt und mittlerweile ein labriger Haufen.
Ich wäre euch super super dankbar wenn ihr mir helfen könnt!
Gruß Marc
Einen schönen guten Tag an das CB Forum! Ich habe hier keinen Vorstellungsthread gefunden, deshalb stelle ich mich hier mal kurz vor bevor ich mit der Frage beginne. Ich bin der Marc 27 Jahre alt und komme aus der Region um Hannover rum. Hobbymäßig lerne ich zurzeit JavaScript und lese hier gerne in den Hardware Bereichen mit um bisschen was an Wissen mitzunehmen.
Auf ein gutes miteinander
---------------------------------------------------------------VORSTELLUNG ENDE---------------------------------------------------------
Ich habe 3 folgende Problem was mich ziemlich dumm fühlen lässt und langsam schon herunterzieht.
1. Das eingeben und das erzeugen der Listeneinträge to Do's klappt. Sobald ich die Seite aber neu lade verschwindet der "check" Status und bei neuer Eingabe verschwinden die vorherigen Einträge unter CheckList und es steht nur noch der aktuell eingegebene Punkt da, der die vorherigen 2 verschwinden lassen hat.
Nach meinen Gedanken ist das Problem, dass sich "i" nach jedem neu Laden auf 0 bzw. nicht deklariert zurücksetzt und ich per if Abfrage sobald userInputStorage "true bzw. nicht mehr null" ist dann für i den Wert von closeBtn.length nehme, da diese ja immer die aktuelle Länge der Liste hat und sich nach dem neu Laden nicht zurücksetzt. Nur funktioniert leider nicht.
Ist meine Annahme aber richtig das ich eine zweite Option per if nach dem neu Laden einbringen muss die dann die aktuelle Länge der Liste berücksichtigt? Wie schaffe ich es nach dem neu Laden die Liste fließend weiter fortzuführen?
2. Wenn ich einen Listeneintrag "removen" möchte werden geich alle Einträge "removed" + dem "ul bzw. #toDoList" Tag aus der HTML Datei.
Ich vermute daran das meine <li> tag nicht an die "ul bzw #toDoList" angehängt ist doch wenn ich das mit #toDoList.append(li); versuche funktioniert es nicht.
Ist diese Annahme auch richtig und nur mein Horizont zu begrenzt um es richtig umzusetzen?
3. Ist das Problem das sich der "checked" Status eines Listeneintrags nach jedem neu Laden zurücksetzt. Muss ich diesen auch im localStorage speichern und falls ja wie?
Ich habe schon sovieles mit verschiedensten Annahmen probiert aber bin jedes mal gescheitert außerdem ist mein Gehirn so oft geplatzt und mittlerweile ein labriger Haufen.
Ich wäre euch super super dankbar wenn ihr mir helfen könnt!
Gruß Marc
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Checklist</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="pageContent">
<div id="inputContainer">
<input type="text" id="inputField">
<span class="placeholder">To do einfügen</span>
<button id="saveInputBtn">SPEICHERN</button>
</div>
<div id="checkListContainer">
<h1>Check List</h1>
<ul id="toDoList">
</ul>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Javascript:
let inputField = document.querySelector('#inputField');
let toDoList = document.querySelector('#toDoList');
let saveInputBtn = document.querySelector('#saveInputBtn');
let userInput = [];
let userInputStorage = JSON.parse(localStorage.getItem('userInput'));
let closeBtn = document.getElementsByClassName ("closeBtn");
let li = document.getElementsByTagName('li');
saveInputBtn.addEventListener('click', () => {
userInput.push(`<li><input class="check1" type="checkbox"> <span class="toDoText"> ${inputField.value} </span> <i class="closeBtn">\u00D7</i></li>`);
inputField.value = "";
localStorage.setItem('userInput', JSON.stringify(userInput));
listitem = [];
// if(userInputStorage == null) {
for(i = 0; i < userInput.length; i++){
listitem += userInput[i] ;
}
toDoList.innerHTML = listitem;
// }
/*
else {
for(i = closeBtn.length; i < closeBtn.length; i++){
listitem += userInput[i];
}
toDoList.innerHTML = listitem;
}
*/
for (j = 0; j < closeBtn.length; j++) {
closeBtn[j].onclick = function () {
var div = this.parentElement;
div.parentElement.remove();
}
}
});
if (userInputStorage) {
listitem = userInputStorage.join(' '); // remove comma
toDoList.innerHTML = listitem;
};
for (j = 0; j < closeBtn.length; j++) {
closeBtn[j].onclick = function () {
var div = this.parentElement;
div.parentElement.remove();
}
};