我添加到复选框的事件“onchange”在 JavaScript 中无法正常工作答案

【问题标题】：The event 'onchange' I added to my checkbox doesn't work well in JavaScript我添加到复选框的事件“onchange”在 JavaScript 中无法正常工作
【发布时间】：2022-08-19 02:13:20
【问题描述】：

我正在努力在网络上创建一个基本的 ToDo 列表，包括添加任务：在结构中表示 - 并删除任务，一旦任务被选中

<!DOCTYPE html>
<html>
<head>
    <title>TheToDoList</title>
</head>

<script>
let counter = 0
let tasks = []

function removeTask(){
    console.log(counter)
}

function addTask(){
    var task = document.getElementById(\"tsk\").value;
    var div = document.getElementById(\"tsklst\");
    var input = document.createElement(\"input\")
    input.type = \"checkbox\";
    input.id = counter;
    input.value = task;
    input.onchange = removeTask;
    var lable = document.createElement(\"lable\");
    lable.innerText = task;
    lable.for = counter;
    div.appendChild(input);
    div.appendChild(lable);
    div.innerHTML += \'</br>\'
    tasks.push(document.getElementById(counter))
    counter++;
}
</script>

<body>
<h1>My ToDo List</h1>
<input id=\"tsk\" type=\"text\" placeholder=\"What You Need To Do?\">
<input type=\"button\" value=\"Add Task\" onclick=\"addTask()\">
<div id=\"tsklst\"></div>
</body>
</html>

\'。

一旦用户单击“添加任务”按钮，addTask 函数就会创建带有标签的复选框，包含写入的任务。

问题是，虽然我定义了我创建的每个复选框的 onchange 事件，但是当我通过浏览器检查它时 - removeTask 函数由于某种原因没有响应。

我在 removeTask 函数中放置了一个 console.log，并带有一个任务计数器来说明情况。 - 仍然无法弄清楚是什么问题。

标签： html dom event-handling dom-events

【解决方案1】：

注释您的代码并使用 setAttribute 设置更改事件

// input.onchange = 'removeTask()';
input.setAttribute('onChange', 'removeTask()');

希望这对你有用。您可以检查附加到您的复选框元素的事件

【讨论】：