- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在做一个简单的待办事项列表项目。在这个项目中,您可以添加一个任务,一旦用户按下提交,任务就会与一个复选框一起显示。当您单击复选框
时,它应该会显示一个警报
并使任务样式
装饰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/
这个问题在这里已经有了答案: What's the proper value for a checked attribute of an HTML checkbox? (10 个答案) 关闭 8 年
我使用这个制作了自定义复选框: enter link description here 也可在 stackoverflow 上获得:enter link description here 但我正在尝试
我需要使用 CSS“checkbox-hack”来实现滑动菜单指示器效果,我唯一的方法是通过 JavaScript 附加输入元素。我被迫通过在线工具 MonoSolutions 执行此操作,并且我受到
此代码运行良好,但缺少一些我需要的东西。基本上,如果输入有一个 checked="checked" 属性,它应该使其他两个元素保持禁用状态。如果未选中,则元素已启用。 这是我在 jsFiddle 上的
当我的人 checkout 文件时,我希望他们将其锁定,以便其他人也无法进行更改,我从这篇文章中看到:http://msdn.microsoft.com/en-us/library/jj155783.
请告诉我这些函数的作用。 最佳答案 这些是基于框架的、与语言无关的方法,用于在 .NET 中定义代码契约。虽然某些语言(如 spec# 和 Delphi Prism)对代码契约具有一流的语言支持,但这
假设以下场景:您有 2 个单选按钮,它们具有相同的名称,并且都被选中(我知道这是无效的): 为什么下面两个选择器的行为不同? $('.input:checked').size(); // retu
我正在尝试收听广播。以下均不起作用: [编辑] $('selector').attr('checked','checked'); $('selector').attr('checked',true);
我实际上在努力理解此类型错误。 任何人都知道我如何更正代码?谢谢 CheckIn checkin1 = new CheckIn(location1, dt); CheckInMonths checkI
我有这段代码,但不起作用。 .on("click","span.name", function selectThisName(e) { if (e.altKey) {
我现在是 Espresso 的新手,我遇到了这个异常: android.support.test.espresso.AmbiguousViewMatcherException: 'with id: a
我已经创建了一个基本的 2 单选按钮表单,如下面的示例所示。 观察浏览器渲染,我们看到元素 1 被选中。我们检查元素 1 和元素 2。 当我点击元素 2 时,我希望元素 1 的 checked=che
我在查找以下 jquery/checkbox 行为的原因时遇到问题。 $( this.obj + ' table.sgrid-content > thead > tr > th > input.sel
以下逻辑应用在上午 10 点触发并运行 SQL Server 查询。从图片中可以看出,结果集是空的。 条件检查检查查询的结果集是否为空。 (第二张图) 这仍然如何转化为 True?结果显然是空的。 最
我想知道哪种操作更快: int c = version1.compareTo(version2); 这个 if (c == 1) 或者这个 if (c > 0) 符号比较是否只使用一位检查,而相等比较
我有一个包含大约 100 个问题的表单,每个问题都有一个单选按钮和一些复选框,因此我需要用户能够保存表单并在以后加载它。我还需要检查用户在此 session 中更改了哪些。 本题解决问题:How ca
我正在编写一个小程序,需要用户决定一些 bool 值。我已经制作了复选框来处理这一部分,但问题是每次我选中或取消选中一个复选框时,所有其他复选框都会跟随。 我在网上搜索过,但我找到的唯一解释( pyt
我有以下代码片段(我使用的是 jQuery 1.4.2): $.post('/Ads/GetAdStatsRow/', { 'ad_id': id }, function(result) {
我的代码发生了一些奇怪的事情。我有两个按钮,其中一个带有 .add 和 .remove 类,有一个复选框会根据按下哪个按钮而打开和关闭,因此如果您使用删除按钮删除,则选中的复选框将被选中,否则复选框将
我陷入了一种情况,我必须通过“选中”工具栏中的复选框来“选中”列表中存在的所有复选框。 这是创建复选框列表的代码:- itemTpl: 'checked="checked" /> {groupName
我是一名优秀的程序员,十分优秀!