1

I am working on a simple To-Do list project. In this project you are able to add a task and once the user presses submit the task is shown along with a checkbox. When you click the checkbox, it's supposed to show an alert and make the tasks style decoration line-through.

I've tried many ways to accomplish this. The first way I tried work however it only worked on one task and for the others, it showed an error. I also tried making it work with an if statement but it's just showing the same error. I've tried switching a lot of things around (that's why my code looks so messy) but it just won't work. 

var name = prompt("Please Enter Your Name :)");
document.write('<h1 id = "greet">' + 'Hello  ' + name + ' Let\'s Be Productive Today' + '</h1>');

function showTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  var session = "AM";

  if (h == 0) {
    h = 12;
  }

  if (h > 12) {
    h = h - 12;
    session = "PM";
  }

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  var time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("MyClockDisplay").innerText = time;
  document.getElementById("MyClockDisplay").textContent = time;

  setTimeout(showTime, 1000);

}

showTime();
document.getElementById("b").onclick = function () {
  document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function () {
  document.querySelector(".To-Do").style.display = 'none';
}

document.getElementById("task");
document.getElementById("date");
document.getElementById("tsks");
document.getElementById("check");

document.getElementById("s").onclick = function () {
  var newEl = document.createElement("p");
  newEl.setAttribute("id", "tsks");
  newEl.innerHTML = "<input type = 'checkbox' id = 'check' onclick = 'checked();'>" + task.value + ' ' + date.value;
  document.getElementById('task2').appendChild(newEl);


}

function checked() {
  if (check.onclick == true) {
    tsks.style.textDecoration = "line-through";
    alert("You completed task" + tsks.value + "Good Job!");
  }
}
body {
  background-image: url("https://i.ibb.co/dLrp1gP/43150024-polka-dot-background-blue-vector-elegant-image.jpg");
}

.content {
  background-color: white;
  width: 700px;
  height: 400px;
  position: absolute;
  left: 325px;
  top: 150px;
}

#greet {
  position: absolute;
  left: 445px;
  top: 150px;
  background: -webkit-linear-gradient(#2980B9, #6DD5FA, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#MyClockDisplay {
  color: blue;
  font-weight: bold;
  position: absolute;
  left: 625px;
  top: 230px;
}

#b {
  background-image: linear-gradient(#2980B9, #6DD5FA, #fff);
  color: black;
  border-color: white;
  text-weight: bold;
  width: 70px;
  height: 50px;
  position: absolute;
  left: 625px;
  top: 260px;
}

.To-Do {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 1;
}

.modal-content {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  position: relative;
  background-color: purple;
}

.close {
  position: absolute;
  top: 0;
  right: 14px;
  font-size: 32px;
  transform: rotate(45deg);
  cursor: pointer;
}

#aat {
  background-color: white;
  font-weight: bold;
}

h2 {
  position: absolute;
  left: 590px;
  top: 305px;
  border-bottom: 5px solid blue;
}

p {
  font-weight: bold;
  position: relative;
  left: 590px;
  top: 360px;
}
<!DOCTYPE html>
<html>
  <head>
<title>To-Do List</title>
  </head>
  <body>
    <div class = "content"></div>
    <div id="MyClockDisplay" class="clock" onload="showTime()"></div>
    <button id = "b">Add A Task</button>
    <div class = "To-Do">
      <div class = "modal-content">
        <h1 align = "center" id = "aat">ADD A TASK</h1>
        <input type = "text" placeholder = "task" id = "task">
        <input type = "date" id = "date">
        <div class = "close">+</div>
        <input type = "submit" id = "s">
      </div>
    </div>
    <div id = "task2"></div>
    <h2>YOUR TASKS</h2>
  </body>
</html>
Azametzin
  • 5,223
  • 12
  • 28
  • 46
Love2Code
  • 440
  • 6
  • 19
  • 1
    Don’t use `onclick` or use a function name other than `checked`. – Sebastian Simon Aug 14 '19 at 18:20
  • Possible duplicate of [JS function named \`animate\` doesn't work in Chrome, but works in IE](https://stackoverflow.com/questions/28173800/js-function-named-animate-doesnt-work-in-chrome-but-works-in-ie) and [Uncaught TypeError: lang is not a function](https://stackoverflow.com/q/38276407/4642212). Finally found that dupe… – Sebastian Simon Aug 14 '19 at 18:26

4 Answers4

2

I'm not sure why, but within the scope of the onclick execution, checked is a local variable that contains the checkbox's clicked property.

There are several ways you can resolve this:

  1. Rename the function so it doesn't conflict with this variable.
  2. Call it as window.checked().
  3. Assign the handler by assigning to the onclick property or calling addEventListener rather than putting it in the HTML.

I've chosen the last method.

Also, IDs should be unique, you can't reuse the IDs check and tsks for every task. You can refer to the box that was clicked on with this in the function, and the containing p element with this.parentElement.

A p element doesn't have a value property, use textContent to get the name of the task.

var name = prompt("Please Enter Your Name :)");
document.write('<h1 id = "greet">' + 'Hello  ' + name + ' Let\'s Be Productive Today' + '</h1>');

function showTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  var session = "AM";

  if (h == 0) {
    h = 12;
  }

  if (h > 12) {
    h = h - 12;
    session = "PM";
  }

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  var time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("MyClockDisplay").innerText = time;
  document.getElementById("MyClockDisplay").textContent = time;

  setTimeout(showTime, 1000);

}

showTime();
document.getElementById("b").onclick = function () {
  document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function () {
  document.querySelector(".To-Do").style.display = 'none';
}

document.getElementById("task");
document.getElementById("date");
document.getElementById("tsks");
document.getElementById("check");

document.getElementById("s").onclick = function () {
  var newEl = document.createElement("p");
  newEl.innerHTML = "<input type = 'checkbox'>" + task.value + ' ' + date.value;
  newEl.querySelector("input").addEventListener("click", checked);
  document.getElementById('task2').appendChild(newEl);


}

function checked() {
  if (this.checked) {
    var tsks = this.parentElement;
    tsks.style.textDecoration = "line-through";
    alert("You completed task" + tsks.innerText + "Good Job!");
  }
}
body {
  background-image: url("https://i.ibb.co/dLrp1gP/43150024-polka-dot-background-blue-vector-elegant-image.jpg");
}

.content {
  background-color: white;
  width: 700px;
  height: 400px;
  position: absolute;
  left: 325px;
  top: 150px;
}

#greet {
  position: absolute;
  left: 445px;
  top: 150px;
  background: -webkit-linear-gradient(#2980B9, #6DD5FA, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#MyClockDisplay {
  color: blue;
  font-weight: bold;
  position: absolute;
  left: 625px;
  top: 230px;
}

#b {
  background-image: linear-gradient(#2980B9, #6DD5FA, #fff);
  color: black;
  border-color: white;
  text-weight: bold;
  width: 70px;
  height: 50px;
  position: absolute;
  left: 625px;
  top: 260px;
}

.To-Do {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 1;
}

.modal-content {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  position: relative;
  background-color: purple;
}

.close {
  position: absolute;
  top: 0;
  right: 14px;
  font-size: 32px;
  transform: rotate(45deg);
  cursor: pointer;
}

#aat {
  background-color: white;
  font-weight: bold;
}

h2 {
  position: absolute;
  left: 590px;
  top: 305px;
  border-bottom: 5px solid blue;
}

p {
  font-weight: bold;
  position: relative;
  left: 590px;
  top: 360px;
}
<!DOCTYPE html>
<html>
  <head>
<title>To-Do List</title>
  </head>
  <body>
    <div class = "content"></div>
    <div id="MyClockDisplay" class="clock" onload="showTime()"></div>
    <button id = "b">Add A Task</button>
    <div class = "To-Do">
      <div class = "modal-content">
        <h1 align = "center" id = "aat">ADD A TASK</h1>
        <input type = "text" placeholder = "task" id = "task">
        <input type = "date" id = "date">
        <div class = "close">+</div>
        <input type = "submit" id = "s">
      </div>
    </div>
    <div id = "task2"></div>
    <h2>YOUR TASKS</h2>
  </body>
</html>
Barmar
  • 741,623
  • 53
  • 500
  • 612
1

I got it to work by changing checked() to window.checked() and removing the if statement in side the checked function

newEl.innerHTML =  "<input type = 'checkbox' id = 'check' onclick = 'window.checked()'>"  + task.value  + '&nbsp;' + date.value;

function checked() {
  tsks.style.textDecoration = "line-through";
  alert("You completed task" + tsks.value + "Good Job!");
}
Drew D
  • 11
  • 2
1

Hey it worked by changing if(check.onclick == true) to if(check.checked == true) and also function name from checked to chec, because checked is a property in java script . So this keyword cannot be used as function name.

var name = prompt("Please Enter Your Name :)");
document.write( '<h1 id = "greet">' + 'Hello  ' + name + ' Let\'s Be Productive Today' + '</h1>');
function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    var s = date.getSeconds();
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();
document.getElementById("b").onclick = function() {
 document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function() {
 document.querySelector(".To-Do").style.display = 'none';
}

document.getElementById("task");
document.getElementById("date");
document.getElementById("tsks");
document.getElementById("check");

document.getElementById("s").onclick = function() {
 var newEl = document.createElement("p");
 newEl.setAttribute("id", "tsks" );
     newEl.innerHTML =  "<input type = 'checkbox' id = 'check' onclick = 'chec()'>"  + task.value  + '&nbsp;' + date.value;
 document.getElementById('task2').appendChild(newEl);


}
function chec() {
 if(check.checked == true) {
  tsks.style.textDecoration = "line-through";
 alert("You completed task" + tsks.value + "Good Job!");
 }
}
body {
  background-image:url("https://i.ibb.co/dLrp1gP/43150024-polka-dot-background-blue-vector-elegant-image.jpg");
 }
 .content {
  background-color:white;
  width:700px;
  height:400px;
  position:absolute;
  left:325px;
  top:150px;
 }
 #greet {
  position:absolute;
  left:445px;
  top:150px;
   background: -webkit-linear-gradient(#2980B9, #6DD5FA, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }
 #MyClockDisplay {
  color:blue;
  font-weight:bold;
  position:absolute;
  left:625px;
  top:230px;
 }
 #b {
  background-image:linear-gradient(#2980B9, #6DD5FA, #fff);
  color:black;
  border-color:white;
  text-weight:bold;
  width:70px;
  height:50px;
  position:absolute;
  left:625px;
  top:260px;
 }
 .To-Do {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center;
  display:none;
  z-index:1;
  

  
 }
 .modal-content {
  width:500px;
  height:300px;
  border-radius:10px;
  position:relative;
  background-color:purple;
 }
 .close {
  position:absolute;
  top:0;
  right:14px;
  font-size:32px;
  transform:rotate(45deg);
  cursor:pointer;

 }
 #aat {
  background-color:white;
  font-weight:bold;
 }

 h2 {
  position:absolute;
  left:590px;
  top:305px;
  border-bottom:5px solid blue;
 }
 p {
  font-weight:bold;
  position:relative;
  left:590px;
  top:360px;
 }
<!DOCTYPE html>
<html>
<head>
 <title>To-Do List</title>
</head>
<body>
<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<button id = "b">Add A Task</button>
<div class = "To-Do">
<div class = "modal-content">
<h1 align = "center" id = "aat">ADD A TASK</h1>
<input type = "text" placeholder = "task" id = "task">
<input type = "date" id = "date">
<div class = "close">+</div>
<input type = "submit" id = "s">
</div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>
CharanKumar Beeram
  • 24
  • 3
  • 1
    _“because `checked` is a property in JavaScript”_ — what? That’s absolutely not why it doesn’t work. It doesn’t work because the `onclick` attribute assumes an implicit `with`-scope that includes the element’s prototype which contains the boolean getter property `checked` from `HTMLInputElement.prototype.checked`, overriding the `checked` function defined above. Which, by the way, is one of [_many_ reasons to avoid `onclick`](https://stackoverflow.com/a/43459991/4642212). – Sebastian Simon Aug 14 '19 at 18:33
  • Also, it’s not a keyword. – Sebastian Simon Aug 14 '19 at 18:51
1

Two points:

  1. You have used function "checked" on the checkbox. It is the name of property, so choose any other name
  2. To change only selected element - pass it to event handler.

Working example: https://jsfiddle.net/zordaxy/L0sbp8mt/27/

document.getElementById("b").onclick = function() {
 document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function() {
 document.querySelector(".To-Do").style.display = 'none';
}

document.getElementById("s").onclick = function() {
 var newEl = document.createElement("p");
 newEl.setAttribute("id", "tsks" );
     newEl.innerHTML =  "<input type = 'checkbox' id = 'check' onclick = 'checked2(this);'>"  + task.value  + '&nbsp;' + date.value;
 document.getElementById('task2').appendChild(newEl);


}
function checked2(item) {
 console.log(item);
 item.parentElement.style.textDecoration = "line-through";
}
<!DOCTYPE html>
<html>
<head>
 <title>To-Do List</title>
</head>
<body>

<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
    <button id = "b">Add A Task</button>
<div class = "To-Do">
    <div class = "modal-content">
        <p align = "center" id = "aat" onclick='checked()'>ADD A TASK</p>
        <input type = "text" placeholder = "task" id = "task">
        <input type = "date" id = "date">
        <div class = "close">+</div>
        <input type = "submit" id = "s">
    </div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>
Alex Vovchuk
  • 2,828
  • 4
  • 19
  • 40