George George - 2 months ago 15
Javascript Question

My todo list is bugged

Can some one help me? i'm trying to code a simple todolist with JS i'm
begginer on this language, my tasks were adding ok, but when i created a button to complete the task it bugged everything, the add tasks is ok, deleting was ok too, but when i finish a task make it done, i can't make my action.

Receiving those errors When pressing my buttons delete or done.

Uncaught TypeError: Cannot set property 'innerHTML' of null (20:43:32:155 | error, javascript)
at public_html/todo.js:65

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:43:32:252 | error, network)
at http://localhost:8383/favicon.ico

Uncaught TypeError: Cannot set property 'innerHTML' of null (20:44:46:399 | error, javascript)
at public_html/todo.js:65

Here's my code

<!DOCTYPE html>
<html>
<head>
<title>TODO</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>TODOLIST</h1>

<input id="task"><button id="add">Add</button>
<hr>

<h2>todo</h2>
<ul id="todos"></ul>
<h2>done</h2>
<ul id="done"></ul>

<script src="todo.js"></script>
</body>
</html>


JS:

function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}

function get_dones(){
var dones = new Array;
var dones_str = localStorage.getItem('done');
if (dones_str !== null){
dones = JSON.parse(dones_str);
}
return dones;
}


function add() {
var task = document.getElementById('task').value;

var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));

show();

return false;
}

function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));

show();

return false;
}

function show() {
var todos = get_todos();
var dones = get_dones();


var html;
for(var i=0; i<todos.length; i++) {
html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">deletar</button> <button class="done" id="' + i + '">Feito</button></li>';
};

document.getElementById('todos').innerHTML = html;

var html2;
for(var i=0; i<dones.length; i++) {
html2 += '<li>' + dones[i] + '<button class="remove" id="' + i + '">deletar</button> <button class="done" id="' + i + '">Feito</button></li>';
};

document.getElementById('dones').innerHTML = html2;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};

var buttons2 = document.getElementsByClassName('done');
for (var i=0; i < buttons2.length; i++) {
buttons2[i].addEventListener('click', done);
};
}

function done(){
var id = this.getAttribute('id');
var done = get_dones();
localStorage.setItem('done', JSON.stringify(dones));

show();

return false;
}

document.getElementById('add').addEventListener('click', add);
show();

Answer

Your function

show()

is not closed correctly with a }

Within the show() function you have:

document.getElementById('dones').innerHTML = html;

however, your HTML has no element with an ID of "dones".

Next, in your function

function done(){
var id = this.getAttribute('id');
var done = get_dones();
localStorage.setItem('done', JSON.stringify(dones));

Your variable is named "done", but your are trying to stringify "dones".