检查不是函数javascript错误 [英] Checked is not a function javascript error
本文介绍了检查不是函数javascript错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在做一个简单的待办事项清单项目.在该项目中，您可以添加任务，并且一旦用户按下提交"，就会显示该任务以及一个复选框.当您单击复选框时，它应该显示一个 alert ，并使任务 style 装饰 line-through .
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.
我已经尝试了多种方法来实现这一目标.但是，我尝试工作的第一种方法仅适用于一项任务，而对于其他任务，则显示错误.我也尝试过使它与if语句一起使用，但它只显示相同的错误.我尝试过切换很多东西(这就是为什么我的代码看起来很乱的原因)，但是它根本无法正常工作.
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>推荐答案
嘿，它通过将 if(check.onclick == true)更改为i f(check.checked ==true)，以及函数名称从checked到chec，因为 checked 是Java脚本中的一个属性.因此，此关键字不能用作函数名称.
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 + ' ' + 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>这篇关于检查不是函数javascript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
