Checked is not a function javascript error

问题

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>

回答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>

回答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:

Rename the function so it doesn't conflict with this variable.
Call it as window.checked().
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>

回答3:

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!");
}

回答4:

Two points:

You have used function "checked" on the checkbox. It is the name of property, so choose any other name
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>

来源：https://stackoverflow.com/questions/57499873/checked-is-not-a-function-javascript-error

标签

javascript

html

function

onclick

syntax-error