2017-11-25 228 views
0

我决定在视频之后重复执行JavaScript中的待办事项列表,但视频已经是2年了,所以可能会有一些属性或其他内容发生更改,并且被定义为真实我不知道。 这里是HTML:event.target在函数中不起作用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>To-Do list</title> 
    <link rel="stylesheet" href="main.css"> 
</head> 
<body> 
    <input type="text" id="input"> 
    <button id="btn">Add</button> 

    <hr> 

    <ul id="todo"> 

    </ul> 
    <ul id="done"> 

    </ul> 




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

这里是JavaScript的:

(function() { 
    let input = document.getElementById('input'); 
    let btn = document.getElementById('btn'); 
    let lists = { 
     todo: document.getElementById('todo'), 
     done: document.getElementById('done') 
    }; 

    let makeTaskHtml = function(str, onCheck) { 
     let el = document.createElement('li'); 
     let checkbox = document.createElement('input'); 
     let label = document.createElement('span'); 

     checkbox.type = 'checkbox'; 
     checkbox.addEventListener('click', onCheck); 
     label.textContent = str; 

     el.appendChild(checkbox); 
     el.appendChild(label); 

     return el; 
    }; 


    let addTask = function(list, task) { 
     list.appendChild(task); 
    }; 

    let onCheck = function(event) { 
     let task = event.target; 

     console.log(task); 
    }; 

    addTask(lists.todo, makeTaskHtml('Test-todo')); 
    addTask(lists.done, makeTaskHtml('Test-done')); 


}()); 

在功能上的oncheck我试图CONSOLE.LOG我在此函数定义之前,但什么都没有发生的任务:既没有错误,也没有结果,我预计看到 有什么问题?可能是因为event.target?或者addEventListener? 请帮我解释一下。在此先感谢

回答

1

你发挥makeTaskHtml需要两个参数:

function makeTaskHtml(str, onCheck) 

但是你只用一个调用它:

addTask(lists.todo, makeTaskHtml('Test-todo')); 

您需要onCheck通过作为第二个参数或删除函数声明的第二个参数。

+0

非常感谢!它真的帮了大忙! –