#javascript #html #dom
#javascript #HTML #dom
Вопрос:
Здесь я пытаюсь выполнить базовое упражнение со списком задач. Я могу получать задачи из локального хранилища и отображать их, и я могу удалять их с экрана, но по какой-то причине моя функция deleteTodosFromStorage не работает должным образом, каждый раз, когда я перезагружаю страницу, я получаю элементы, которые я удалил. я не смог удалить значения локального хранилища.
Вот мой HTML-код:
<body>
<div class="container" style ="margin-top:20px;">
<div class="card row">
<div class="card-header">Todo List</div>
<div class="card-body">
<form id = "todo-form" name="form">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="todo" id = "todo" placeholder="Bir Todo Girin">
</div>
</div>
<button type="submit" class="btn btn-danger">Todo Ekleyin</button>
</form>
<hr>
</div>
<div class="card-body">
<hr>
<h5 class="card-title" id = "tasks-title">Todolar</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id = "filter" placeholder="Bir Todo Arayın">
</div>
</div>
<hr>
<ul class="list-group">
<!-- <li class="list-group-item d-flex justify-content-between">
Todo 1
<a href = "#" class ="delete-item">
<i class = "fa fa-remove"></i>
</a>
</li>-->
</ul>
<hr>
<a id = "clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<script src="todo1.js"></script>
</body>
</html>
И вот мой JS-код:
const list = document.querySelector(".list-group");
const todoInput = document.querySelector("#todo");
const cardBody = document.querySelectorAll(".card-body")[0];
const cardBody2 = document.querySelectorAll(".card-body")[1];
form.addEventListener("submit", addTodo);
document.addEventListener("DOMContentLoaded",loadTodosFromStorage);
cardBody2.addEventListener("click",deleteTodos);
function deleteTodos(e){
if(e.target.className === "fa fa-remove"){
e.target.parentElement.parentElement.remove();
showAlert("success","Silme İşlmei Başarılı");
deleteTodosFromStorage(e.target.parentElement.parentElement.textContent);
}
}
function deleteTodosFromStorage(deletetodo){
let todos = getTodosFromStorage();
todos.forEach(function(todo,index){
if(todo === deletetodo){
todos.splice(index,1);
}
});
localStorage.setItem("todos", JSON.stringify(todos));
}
function loadTodosFromStorage(){
let todos = getTodosFromStorage();
todos.forEach(function(todo){
addListItem(todo);
})
}
function addTodo(e){
const value = todoInput.value.trim();
if (value === ""){
showAlert("danger", "Lütfen Bir Değer Giriniz");
}
else {
addListItem(value);
showAlert("success", "Todo Girişi Başarılı!");
AddTodosToStorage(value);
}
e.preventDefault();
}
function getTodosFromStorage(){
let todos;
if(localStorage.getItem("todos")=== null){
todos = [];
}
else{
todos = JSON.parse(localStorage.getItem("todos"));
}
return todos;
}
function AddTodosToStorage(value){
let todos = getTodosFromStorage();
todos.push(value);
localStorage.setItem("todos",JSON.stringify(todos));
}
function showAlert(type, message){
const alert = document.createElement("div");
alert.className = `btn btn-${type}`
alert.textContent = message;
cardBody.appendChild(alert);
setTimeout(() => {
alert.remove();
}, 1500);
}
function addListItem(value){
const li = document.createElement("li");
li.className = "list-group-item d-flex justify-content-between";
const a = document.createElement("a");
a.href ="#";
a.className ="delete-item";
a.innerHTML =" <i class = 'fa fa-remove'></i>";
li.appendChild(document.createTextNode(value));
li.appendChild(a);
list.appendChild(li);
todoInput.value = "";
}
Комментарии:
1. Вы уверены, что нашли правильный элемент с помощью
if(todo === deletetodo){
? Вы вызываетеdeleteTodosFromStorage(e.target.parentElement.parentElement.textContent);
но правильное ли это значение? Возможно, есть разница в пробелах или что-то в этом роде, поэтомуif
проверка никогда не срабатывает, поэтому вы никогда не удаляете ее из массива, и этоlocalStorage.setItem("todos", JSON.stringify(todos));
просто записывает то же самое обратно в localStorage.2.
function deleteTodosFromStorage(deletetodo){ let todos = getTodosFromStorage(); console.log(deletetodo); todos.forEach(function(todo,index){ if(todo === deletetodo){ todos.splice(index,1); } }); localStorage.setItem("todos", JSON.stringify(todos)); }
Когда я набираю console.log(deletetodo) в функции, я получаю строковое значение строкового значения элемента списка. итак, как вы сказали, если никогда не срабатывает, но не смог найти основную проблему