CODEWITHSUNDEEP
javascripthtml
shashank chaudhary
shashank chaudhary

Reputation: 115

Adding onclick() function to a checkbox created using DOM manipulation and passing this as argument

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>

Upvotes: 0

Views: 104

Answers (1)

brk
brk

Reputation: 50291

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>

Upvotes: 1

Related Questions