所以这就是发生的事情，每当您在第一个 div 中键入并按 Enter 时，我都会创建一个待办事项列表应用程序，第二个 div 中会生成一个任务一个复选框，因此当您单击复选框时，任务会通过文本修饰获得删除线。
为此，我添加了一个onclick() 函数到 checkbox 但每次我点击 checkbox 时都会抛出一个错误:
"Cannot read property 'setAttribute' of undefined"
这是我的 JavaScript 代码。
function add_task() {
var i = Math.floor(Math.random() * Math.floor(500));
var work = document.getElementById('task').value; //Save input from user
var text_node = document.createTextNode(work);
if (!work.trim()) //Check if user entered value is empty or not
{
alert("A task requires something to do ;)\ntry adding some text...");
return;
}
var task_list = document.createElement("ul"); //Create an unordered list
task_list.setAttribute("type", "none");
var create_task = document.createElement("INPUT"); //Create A CHECKBOX
create_task.setAttribute("type", "checkbox");
create_task.setAttribute("id", i);
create_task.setAttribute("onclick", "task_done(this)");
var checkbox_name = document.createElement("label"); //Create a label(user entered task) for checkbox
checkbox_name.setAttribute("for", i);
checkbox_name.appendChild(text_node);
task_list.appendChild(create_task); //Append CHECKBOX to unordered list
task_list.appendChild(checkbox_name); //Append label to unordered list
document.getElementById("div1").appendChild(task_list); //Append all elements to div
}
function task_done(t) {
document.t.setAttribute("class", "strike"); //getting error
here
}
function clear_field() {
document.getElementById('task').value = null;
}
function detect(e) {
if (e.keyCode == 13) {
add_task();
clear_field();
}
}
这是 HTML 代码，以防您需要
<html>
<head>
<script type = "text/javascript" src = "action.js" ></script>
<link rel="stylesheet" href='to-do_style.css'>
<link href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet">
</head>
<body>
<div id="div1" class="left">
<h1>Tasks</h1>
Add tasks by typing into right panel and <br>press enter.
</div>
<div id="div2" class="right">
I need to...<br>
<textarea id='task' rows="15" cols="76"onkeypress="detect(event)">
</textarea>
</div>
</body>
</html>
最佳答案
实际上，您可以将 id 传递给 onclick 处理程序
function add_task() {
var i = Math.floor(Math.random() * Math.floor(500));
var work = document.getElementById('task').value; //Save input from user
var text_node = document.createTextNode(work);
if (!work.trim()) //Check if user entered value is empty or not
{
alert("A task requires something to do ;)\ntry adding some text...");
return;
}
var task_list = document.createElement("ul"); //Create an unordered list
task_list.setAttribute("type", "none");
var create_task = document.createElement("INPUT"); //Create A CHECKBOX
create_task.setAttribute("type", "checkbox");
create_task.setAttribute("id", i);
// changed here
create_task.setAttribute("onclick", "task_done('" + i + "')");
var checkbox_name = document.createElement("label"); //Create a label(user entered task) for checkbox
checkbox_name.setAttribute("for", i);
checkbox_name.appendChild(text_node);
task_list.appendChild(create_task); //Append CHECKBOX to unordered list
task_list.appendChild(checkbox_name); //Append label to unordered list
document.getElementById("div1").appendChild(task_list); //Append all elements to div
}
function task_done(t) {
console.log(t)
document.getElementById(t).setAttribute("class", "strike");
}
function clear_field() {
document.getElementById('task').value = null;
}
function detect(e) {
if (e.keyCode == 13) {
add_task();
clear_field();
}
}.strike {
outline: 2px solid green;
}<div id="div1" class="left">
<h1>Tasks</h1>
Add tasks by typing into right panel and <br>press enter.
</div>
<div id="div2" class="right">
I need to...<br>
<textarea id='task' rows="15" cols="76" onkeypress="detect(event)">
</textarea>关于javascript - 将 onclick() 函数添加到使用 DOM 操作创建的复选框并将其作为参数传递，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55343545/