javascript - Checked is not a function javascript错误

我正在做一个简单的待办事项列表项目。在这个项目中，您可以添加一个任务，一旦用户按下提交，任务就会与一个复选框一起显示。当您单击复选框 时，它应该会显示一个警报 并使任务样式 装饰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是一个局部变量，包含了复选框的clicked属性(property)。

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

重命名函数，使其不与此变量冲突。
将其称为 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>

关于javascript - Checked is not a function javascript错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57499873/

javascript - Checked is not a function javascript错误

上一篇：html - 在 CSS 上对齐多个框

下一篇：javascript - 单击单元格时检查单选按钮并更改单元格的背景