Adding onclick() function to a checkbox created using DOM manipulation and passing this as argumentjavascript onclick, anonymous functionJavaScript function in href vs. onclickPassing arguments forward to another javascript functionHow do I pass command line arguments to a Node.js program?How to create a checkbox with a clickable label?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itPass a JavaScript function as parameterHow to connecting the function, createElement and random?Cannot display HTML stringReact js onClick can't pass value to method
Merging two data frames into a new one with unique items marked with 1 or 0
Why did the Middle Kingdom stop building pyramid tombs?
Simplify the code
Available snapshots for main net?
Does it matter if a fuse is connected to the negative or positive terminal of a battery?
Are the Gray and Death Slaad's Bite and Claw attacks magical?
To “Er” Is Human
Could citing a database like libgen get one into trouble?
How do I use efficient repeats in sheets for pop music?
What verb goes with "coup"?
How might boat designs change in order to allow them to be pulled by dragons?
Why am I getting an electric shock from the water in my hot tub?
Emphasize numbers in tables
My mom helped me cosign a car and now she wants to take it
Can you help me, to widen the page. Thank you
How soon after takeoff can you recline your airplane seat?
Can I deep fry food in butter instead of vegetable oil?
Why are examinees often not allowed to leave during the start and end of an exam?
What is this fluorinated organic substance?
Disk usage confusion: 10G missing on Linux home partition on SSD
What is the meaning of ゴト in the context of 鮎
Are there advantages in writing by hand over typing out a story?
Which are more efficient in putting out wildfires: planes or helicopters?
What does this Pokemon Trainer mean by saying the player is "SHELLOS"?
Adding onclick() function to a checkbox created using DOM manipulation and passing this as argument
javascript onclick, anonymous functionJavaScript function in href vs. onclickPassing arguments forward to another javascript functionHow do I pass command line arguments to a Node.js program?How to create a checkbox with a clickable label?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itPass a JavaScript function as parameterHow to connecting the function, createElement and random?Cannot display HTML stringReact js onClick can't pass value to method
0
So here's what's happening, I am creating a to-do list application whenever you type and press enter into first div, a task is generated into second div along with a checkbox, so when you click the checkbox the task gets strike through text-decoration.
For this I added an onclick() function to the the checkbox but every time I click on checkbox it throws an error saying:
"Cannot read property 'setAttribute' of undefined"
here's my javascript code.
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();
here's the HTML code in case you need it
<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>
javascript html
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
add a comment |
0
So here's what's happening, I am creating a to-do list application whenever you type and press enter into first div, a task is generated into second div along with a checkbox, so when you click the checkbox the task gets strike through text-decoration.
For this I added an onclick() function to the the checkbox but every time I click on checkbox it throws an error saying:
"Cannot read property 'setAttribute' of undefined"
here's my javascript code.
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();
here's the HTML code in case you need it
<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>
javascript html
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
t.setAttributeinstead ofdocument.t.setAttribute
– Manuel Otto
Mar 25 at 17:44
add a comment |
0
0
0
So here's what's happening, I am creating a to-do list application whenever you type and press enter into first div, a task is generated into second div along with a checkbox, so when you click the checkbox the task gets strike through text-decoration.
For this I added an onclick() function to the the checkbox but every time I click on checkbox it throws an error saying:
"Cannot read property 'setAttribute' of undefined"
here's my javascript code.
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();
here's the HTML code in case you need it
<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>
javascript html
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
So here's what's happening, I am creating a to-do list application whenever you type and press enter into first div, a task is generated into second div along with a checkbox, so when you click the checkbox the task gets strike through text-decoration.
For this I added an onclick() function to the the checkbox but every time I click on checkbox it throws an error saying:
"Cannot read property 'setAttribute' of undefined"
here's my javascript code.
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();
here's the HTML code in case you need it
<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>
javascript html
javascript html
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
edited Mar 25 at 17:46
Calvin Nunes
3,7863 gold badges11 silver badges35 bronze badges
3,7863 gold badges11 silver badges35 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
asked Mar 25 at 17:34
shashank chaudharyshashank chaudhary
175 bronze badges
175 bronze badges
t.setAttributeinstead ofdocument.t.setAttribute
– Manuel Otto
Mar 25 at 17:44
add a comment |
t.setAttributeinstead ofdocument.t.setAttribute
– Manuel Otto
Mar 25 at 17:44
t.setAttribute instead of document.t.setAttribute– Manuel Otto
Mar 25 at 17:44
t.setAttribute instead of document.t.setAttribute– Manuel Otto
Mar 25 at 17:44
add a comment |
1 Answer
1
active
oldest
votes
1
Actually you can pass the id to the onclick handler
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>answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55343545%2fadding-onclick-function-to-a-checkbox-created-using-dom-manipulation-and-passi%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Actually you can pass the id to the onclick handler
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>answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
add a comment |
1
Actually you can pass the id to the onclick handler
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>answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
add a comment |
1
1
1
Actually you can pass the id to the onclick handler
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>answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
Actually you can pass the id to the onclick handler
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>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>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>answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
answered Mar 25 at 17:49
brkbrk
32.2k3 gold badges24 silver badges47 bronze badges
32.2k3 gold badges24 silver badges47 bronze badges
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
add a comment |
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
it worked thanks
– shashank chaudhary
Mar 25 at 17:51
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55343545%2fadding-onclick-function-to-a-checkbox-created-using-dom-manipulation-and-passi%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
t.setAttributeinstead ofdocument.t.setAttribute– Manuel Otto
Mar 25 at 17:44