Hey zusammen,
und zwar habe ich eine Frage zu einem Web-Projekt, an dem ich zurzeit Arbeite. Ich habe verschiedene Kontakte per input-Tags in eine flexBox in mein HTML eingefügt.
In meinem JavaScript wird jeder eingefügte Kontakt in als Objekt in ein Array gespeichert, welches dann wiederum im localStorage gespeichert wird. Ich habe am Ende einer jeden Zeile (Kontakt) einen Button um diesen Kontakt aus meinem HTML jederzeit löschen zu können.
Um diesen auch aus dem localStorage zu entfernen habe ich in meiner click-Funktion schon das Array aus dem localStorage aufgerufen und wollte die Texte des zu löschenden Kontakts mit den Texten der Kontakte im localStorage vergleichen um so den übereinstimmenden auch aus dem Array zu nehmen. Im Anschluss wird das "neue" Array wieder im localStorage gespeichert.
Leider stimmt mit der Funktion allerdings etwas nicht und ich komm nicht auf den Fehler. Vielleicht hat von euch jemand eine Idee oder sieht den Fehler auf anhieb. Ich würde mich freuen wenn Ihr mir einen Denkanstoß geben könntet der mich auf den Fehler hinweist oder auch den Fehler ansprecht.
Vielen Dank, schon mal!
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
| class Person{
firstName;
lastName;
birthDate;
age;
adress;
zipCode;
city;
phoneNumber;
};
$(document).ready(function () {
var arr = JSON.parse(localStorage.getItem('persons'));
if (arr != null) {
arr.forEach(function (obj) {
$(".flexBox").append('<div class="flexContact"><div class="flexElement">' + obj.firstName + '</div><div class="flexElement">' + obj.lastName + '</div><div class="flexElement">' + obj.birthDate + '</div><div class="flexElement">' + obj.age + '</div><div class="flexElement">' + obj.adress + '</div><div class="flexElement">' + obj.zipCode + '</div><div class="flexElement">' + obj.city + '</div ><div class="flexElement">' + obj.phoneNumber + '</div > <button id="hide"> </button></div > ')
})
}
$("#submit").click(function () {
var persons = [];
persons = JSON.parse(localStorage.getItem('persons')) || [];
const newPerson = new Person()
newPerson.firstName = $("#firstName").val(),
newPerson.lastName = $("#lastName").val(),
newPerson.birthDate = $("#birthDate").val(),
newPerson.age = $("#age").val(),
newPerson.adress = $("#adress").val(),
newPerson.zipCode = $("#zipCode").val(),
newPerson.city = $("#city").val(),
newPerson.phoneNumber = $("#phoneNumber").val(),
persons.push(newPerson);
$(".flexBox").append('<div class="flexContact"><div class="flexElement">' + newPerson.firstName + '</div><div class="flexElement">' + newPerson.lastName + '</div><div class="flexElement">' + newPerson.birthDate + '</div><div class="flexElement">' + newPerson.age + '</div><div class="flexElement">' + newPerson.adress + '</div><div class="flexElement">' + newPerson.zipCode + '</div><div class="flexElement">' + newPerson.city + '</div ><div class="flexElement">' + newPerson.phoneNumber + '</div > <button id="hide"> </button></div > ');
localStorage.setItem('persons', JSON.stringify(persons));
$(".flexContact #hide").click(function () {
$(this).parents(".flexContact").hide("slow");
var removedPerson = $(this).parent(".flexContact").text();
console.log(removedPerson);
var arrayPersons = [];
arrayPersons = JSON.parse(localStorage.getItem('persons'));
console.log(arrayPersons);
for (var i = 0; i < arrayPersons[0].text; i++) {
if (arrayPersons[i].text == removedPerson) {
$(arrayPersons).remove(i);
}
}
localStorage.setItem('persons', JSON.stringify(arrayPersons));
});
});
$(".flexContact #hide").click(function () {
$(this).parents(".flexContact").hide("slow");
var removedPerson = $(this).parent(".flexContact").text();
console.log(removedPerson);
var arrayPersons = [];
arrayPersons = JSON.parse(localStorage.getItem('persons'));
console.log(arrayPersons);
for (var i = 0; i < arrayPersons[0].text; i++) {
if (arrayPersons[i].text == removedPerson) {
$(arrayPersons).remove(i);
}
}
localStorage.setItem('persons', JSON.stringify(arrayPersons));
});
}); |
