Question

我决定在视频播放之后重复使用JavaScript中的待办事项列表，但视频已经有2年了，因此可能会有一些属性或其他内容发生变化而被取消，实际上我不知道。这是HTML：

    <!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？请帮我透露一下。提前致谢

Answer 1

你的函数makeTaskHtml有2个参数：

function makeTaskHtml(str, onCheck)

但你只是用一个来称呼它：

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

您需要传入onCheck作为第二个参数，或从函数声明中删除第二个参数。

函数中的event.target不起作用

1 个答案: