检查不是函数javascript错误答案

【问题标题】：Checked is not a function javascript error检查不是函数javascript错误
【发布时间】：2019-12-21 07:36:00
【问题描述】：

我正在做一个简单的待办事项列表项目。在这个项目中，您可以添加一个任务，一旦用户按下提交，该任务就会与一个复选框一起显示。当您单击checkbox 时，它应该会显示alert 并制作任务style 装饰line-through。

我已经尝试了很多方法来实现这一点。我尝试工作的第一种方式，但它只适用于一个任务，而对于其他任务，它显示了一个错误。我还尝试使用 if 语句使其工作，但它只是显示相同的错误。我尝试了很多东西（这就是我的代码看起来如此混乱的原因），但它就是行不通。

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>

【问题讨论】：

不要使用onclick或使用checked以外的函数名。
JS function named `animate` doesn't work in Chrome, but works in IE 和 Uncaught TypeError: lang is not a function 的可能重复项。终于找到那个骗子了……

标签： javascript html function onclick syntax-error

【解决方案1】：

我不知道为什么，但在 onclick 执行的范围内，checked 是一个包含复选框的 clicked 属性的局部变量。

有几种方法可以解决这个问题：

重命名函数，使其不与此变量冲突。
叫它window.checked()。
通过分配给onclick 属性或调用addEventListener 来分配处理程序，而不是将其放在HTML 中。

我选择了最后一种方法。

另外，ID 应该是唯一的，您不能为每个任务重复使用 ID check 和 tsks。您可以在函数中使用this 引用被点击的框，并使用this.parentElement 引用包含p 的元素。

p 元素没有value 属性，使用textContent 获取任务名称。

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>

【讨论】：

【解决方案2】：

嘿，通过将 if(check.onclick == true) 更改为 if(check.checked == true) 并将函数名称从 check 更改为 chec ，因为 checked 是 java script 中的一个属性。所以这个关键字不能作为函数名。

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>

【讨论】：

“因为 checked 是 JavaScript 中的一个属性” — 什么？这绝对不是它不起作用的原因。它不起作用，因为onclick 属性假定隐含的with-范围包括元素的原型，其中包含来自HTMLInputElement.prototype.checked 的布尔getter 属性checked，覆盖上面定义的checked 函数。顺便说一句，这是many reasons to avoid onclick 之一。
另外，它不是关键字。

【解决方案3】：

我通过将checked() 更改为window.checked() 并删除checked 函数中的if 语句来使其工作

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】：

两点：

您在复选框上使用了“选中”功能。它的名字属性，所以选择任何其他名称
仅更改已选择元素 - 将其传递给事件处理程序。

工作示例：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>

【讨论】：