Эта ошибка повторяется
Uncaught SyntaxError: Неожиданный токен u в JSON в позиции 0 в JSON .parse () в HTMLDocument.getTodos
Я искал, где не определил, но, кажется, обнаружил. Потребуется помощь
Я везде проверял место, которое мне нужно исправить, но не получил
function removeLocalTodos(todo) {
//CHECK---Hey do I already have things in there?
let todos;
if (localStorage.getItem('todos')===null) {
todos=[];
}else{
todos=JSON.parse(localStorage.getItem('todos'));
}
}
Это полный JS код для тщательного анализа
//Selectors
const todoInput=document.querySelector('.todo-input');
const todoButton=document.querySelector('.todo-button');
const todoList=document.querySelector('.todo-list');
const filterOption=document.querySelector('.filter-todo');
//Event Listeners
document.addEventListener('DOMContentLoaded', getTodos);
todoButton.addEventListener('click', addTodo);
todoList.addEventListener('click', deleteCheck);
filterOption.addEventListener('click', filterTodo);
//functions
function addTodo(event) {
//prevent form from submitting
event.preventDefault();
//Todo DIV
const todoDiv=document.createElement('div');
todoDiv.classList.add('todo');
//Creat LI
const newTodo = document.createElement('li');
newTodo.innerText=todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
//ADD TODO TO LOCALSTORAGE
saveLocalTodos(todoInput.value);
//CHECK MARK BUTTON
const completedButton = document.createElement('button');
completedButton.innerHTML='<i class="fas fa-check"></i>';
completedButton.classList.add('complete-btn');
todoDiv.appendChild(completedButton);
//CHECK TRASH BUTTON
const trashButton = document.createElement('button');
trashButton.innerHTML='<i class="fas fa-trash"></i>';
trashButton.classList.add('trash-btn');
todoDiv.appendChild(trashButton);
//APPEND TO LIST
todoList.appendChild(todoDiv);
//Clear Todo INPUT VALUE
todoInput.value='';
}
function deleteCheck(e) {
const item=e.target;
//DELETE TODO
if (item.classList[0] ==='trash-btn'){
const todo=item.parentElement;
//Animation
todo.classList.add('fall');
removeLocalTodos(todo);
todo.addEventListener('transitionend',function (argument) {
todo.remove();
} );
}
//CHECK MARK
if (item.classList[0]==='complete-btn') {
const todo=item.parentElement;
todo.classList.toggle('completed');
}
}
function filterTodo(e) {
const todos = Array.from(todoList.children);
todos.forEach(function (todo) {
switch (e.target.value){
case 'all':
todo.style.display ='flex';
break;
case 'completed':
if (todo.classList.contains('completed')) {
todo.style.display ='flex';
} else {
todo.style.display ='none';
}
break;
case 'uncompleted':
if (!todo.classList.contains('completed')) {
todo.style.display ='flex';
}else {
todo.style.display ='none';
}
break;
}
})
}
function saveLocalTodos(todo) {
//CHECK---Hey do I already have things in there?
let todos;
if (localStorage.getItem('todos')===null) {
todos=[];
}else{
todos=JSON.parse(localStorage.getItem('todos'));
}
todos.push(todo);
localStorage.setItem('todos', JSON.stringify(todos));
}
function getTodos() {
let todos;
//CHECK---Hey do I already have things in there?
if (localStorage.getItem('todos')===null) {
todos=[];
}else{
todos=JSON.parse(localStorage.getItem('todos'));
}
todos.forEach(function (todo) {
//Todo DIV
const todoDiv=document.createElement('div');
todoDiv.classList.add('todo');
//Creat LI
const newTodo = document.createElement('li');
newTodo.innerText=todo;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
//CHECK MARK BUTTON
const completedButton = document.createElement('button');
completedButton.innerHTML='<i class="fas fa-check"></i>';
completedButton.classList.add('complete-btn');
todoDiv.appendChild(completedButton);
//CHECK TRASH BUTTON
const trashButton = document.createElement('button');
trashButton.innerHTML='<i class="fas fa-trash"></i>';
trashButton.classList.add('trash-btn');
todoDiv.appendChild(trashButton);
//APPEND TO LIST
todoList.appendChild(todoDiv);
})
}
function removeLocalTodos(todo) {
//CHECK---Hey do I already have things in there?
let todos;
if (localStorage.getItem('todos')===null) {
todos=[];
}else{
todos=JSON.parse(localStorage.getItem('todos'));
}
console.log(todo);
}
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit"><i class="fas fa-plus-square"></i></button>
<div class="select">
<select name="todos" class="filter-todo">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="uncompleted">Uncompleted</option>
</select>
</div>