函数中的 event.target 没有给出预期的结果

斯捷潘·科洛米耶茨

我决定用 JavaScript 制作一个待办事项列表,复制视频中显示的内容,但视频已经两年了,所以可能是某些属性或其他内容发生了变化并已被弃用,我真的不知道。这是 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'));


}());

onCheckconsole.log之前在此函数中定义的函数中,我尝试执行任务,但什么也没发生:我希望看到的错误和结果都没有出现什么问题?可能是因为event.target还是 addEventListener?请帮我揭露它。

间隔

您的函数makeTaskHtml需要 2 个参数:

function makeTaskHtml(str, onCheck)

但是你只用一个来调用它:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

LOOKUP 函数没有给出预期的结果

来自分类Dev

函数没有给出预期的结果,单元测试失败

来自分类Dev

element.innerHTML在Javascipt中没有给出预期的结果

来自分类Dev

使用 COALESCE 在 SQL Server 中没有给出预期的结果

来自分类Dev

event.target.value在React中给出TypeError

来自分类Dev

event.target.setCustomValidity不是JavaScript中HTMLSelectElement的函数

来自分类Dev

python strip函数没有给出预期的输出

来自分类Dev

如何从javascript函数获取event.target的id?

来自分类Dev

如何使用 FormData 发送 event.target 以模拟函数

来自分类Dev

event.target.name给出未定义的

来自分类Dev

python中的dir(sys)没有给出预期的输出

来自分类Dev

如果jq中的其他没有给出预期的输出

来自分类Dev

event.target在事件中未定义

来自分类常见问题

为什么Event.target不是Typescript中的Element?

来自分类Dev

获取正确的event.target为Javascript中的父元素?

来自分类Dev

react-native中的event.target.value

来自分类Dev

无法从React中的event.target获取样式

来自分类Dev

无法从React中的event.target获取样式

来自分类Dev

在IE8中,event.target无法正常工作

来自分类Dev

为什么将 event.target 存储在变量中?

来自分类Dev

const { target: { files } } = event 在 javascript 中是什么意思?

来自分类Dev

Octave 不断给出函数的结果,尽管没有被问到

来自分类Dev

WeakMap与event.target

来自分类Dev

使用 .each() 函数时没有得到预期的结果

来自分类Dev

event.target选择其所有父项

来自分类Dev

bash列出当前文件夹中的子文件夹没有给出预期的结果[仅提供第一个文件夹]

来自分类Dev

Python中的Sympy没有给出期望的结果

来自分类Dev

我的查询在访问中没有给出正确的结果

来自分类Dev

选择与关系的查询没有在 Laravel eloquent 中给出结果

Related 相关文章

  1. 1

    LOOKUP 函数没有给出预期的结果

  2. 2

    函数没有给出预期的结果,单元测试失败

  3. 3

    element.innerHTML在Javascipt中没有给出预期的结果

  4. 4

    使用 COALESCE 在 SQL Server 中没有给出预期的结果

  5. 5

    event.target.value在React中给出TypeError

  6. 6

    event.target.setCustomValidity不是JavaScript中HTMLSelectElement的函数

  7. 7

    python strip函数没有给出预期的输出

  8. 8

    如何从javascript函数获取event.target的id?

  9. 9

    如何使用 FormData 发送 event.target 以模拟函数

  10. 10

    event.target.name给出未定义的

  11. 11

    python中的dir(sys)没有给出预期的输出

  12. 12

    如果jq中的其他没有给出预期的输出

  13. 13

    event.target在事件中未定义

  14. 14

    为什么Event.target不是Typescript中的Element?

  15. 15

    获取正确的event.target为Javascript中的父元素?

  16. 16

    react-native中的event.target.value

  17. 17

    无法从React中的event.target获取样式

  18. 18

    无法从React中的event.target获取样式

  19. 19

    在IE8中,event.target无法正常工作

  20. 20

    为什么将 event.target 存储在变量中?

  21. 21

    const { target: { files } } = event 在 javascript 中是什么意思?

  22. 22

    Octave 不断给出函数的结果,尽管没有被问到

  23. 23

    WeakMap与event.target

  24. 24

    使用 .each() 函数时没有得到预期的结果

  25. 25

    event.target选择其所有父项

  26. 26

    bash列出当前文件夹中的子文件夹没有给出预期的结果[仅提供第一个文件夹]

  27. 27

    Python中的Sympy没有给出期望的结果

  28. 28

    我的查询在访问中没有给出正确的结果

  29. 29

    选择与关系的查询没有在 Laravel eloquent 中给出结果

热门标签

归档