Question

有人可以帮助我吗？我正在尝试用JS编写一个简单的todolist 我关于这种语言，我的任务添加正常，但是当我创建一个按钮来完成任务时它会按下按钮，添加任务就可以了，删除也没关系，但是当我完成任务完成后，我可以'我的行动。

接收这些错误按下按钮删除或完成。

未捕获的TypeError：无法设置null的属性'innerHTML'（20：43：32：155 |错误，javascript） at public_html / todo.js：65

无法加载资源：net :: ERR_EMPTY_RESPONSE（20：43：32：252 |错误，网络）在http://localhost:8383/favicon.ico

未捕获的TypeError：无法设置null的属性'innerHTML'（20：44：46：399 |错误，javascript） at public_html / todo.js：65

这是我的代码

<!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 1

你的功能

show()

使用}

未正确关闭

在show()函数中：

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

但是，您的HTML没有ID为＆＃34; dones＆＃34;。

的元素

接下来，在你的函数中

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

你的变量被命名为＆＃34;已完成＆＃34;，但是你正在尝试字符串化＃34; dones＆＃34;。

Todo列表问题

1 个答案: