个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试将自定义文本添加到我的“任务”中，当我单击“任务列表”中的添加文本按钮时，它仅显示在地址栏中。目标是单击添加任务后在“任务列表”下创建一个列表项。第一个代码块是我的 app.js 文件，下面的代码块是我的 index.html 文件。
//Load all event listeners
loadEventListeners();
// Load all event listeners
function loadEventListeners() {
// Add task event
form.addEventListener('submit', addTask);
}
// Add task
function addTask(e) {
if(taskInput.value === '') {
alert('Add a task');
}
// Create li element
const li = document.createElement('li');
// Add class
li.className = 'collection-item';
// Create text node and append to li
li.appendChild(document.createTextNode(taskInput.value));
// Create new link element
const link = document.createElement('a');
// Add class
link.className = 'delete-item secondary-content';
// Add icon html
link.innerHTML = '<i class="fa fa-remove"></i>';
// Append the link to li
li.appendChild(link);
// Append li to ul
taskList.appendChild(li);
// Clear Input
taskInput.value = '';
e.preventDefault();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Task List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<form id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
<a href="#" class="clear-tasks btn black">Clear Tasks</a>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="app.js"></script>
</body>
</html>
最佳答案
只需进行一些修改:
const btn = document.querySelector('.btn');
const taskInput = document.getElementById('task');
const taskList = document.querySelector('.container ul');
btn.addEventListener('click', addTask);
// Add task
function addTask(e) {
if(taskInput.value === '') {
alert('Add a task');
}
// Create li element
const li = document.createElement('LI');
// Add class
li.classList.add('collection-item');
// Create text node and append to li
li.appendChild(document.createTextNode(taskInput.value));
// Create new link element
const link = document.createElement('a');
// Add class
link.classList.add('delete-item' , 'secondary-content');
// Add icon html
link.innerHTML = '<i class="fa fa-remove"></i>';
// Append the link to li
li.appendChild(link);
// Append li to ul
taskList.appendChild(li);
e.preventDefault();
}
document.querySelector('.clear-tasks').addEventListener('click',()=> {
// Clear Input
taskInput.value = '';
});
关于javascript - 单击 "add task"后如何让我的文本显示在任务下？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58459734/
25
4
0
Task.WaitAll 方法等待所有任务，Task.WaitAny 方法等待一个任务。如何等待任意N个任务？ 用例:下载搜索结果页面，每个结果都需要一个单独的任务来下载和处理。如果我使用 WaitA
我正在查看一些像这样的遗留 C# 代码: await Task.Run(() => { _logger.LogException(LogLevel.Error, mes
如何在 Linux 中运行 cron 任务？ 关注此Q&A ，我有这个 cron 任务要运行 - 只是将一些信息写入 txt 文件， // /var/www/cron.php $myfile = fo
原谅我的新手问题，但我想按顺序执行三个任务并在剧本中使用两个角色: 任务 角色 任务 角色 任务 这是我到目前为止(任务，角色，任务): --- - name: Task Role Task ho
我有一个依赖于 installDist 的自定义任务 - 不仅用于执行，还依赖于 installDist 输出: project.task('run', type: JavaExec, depends
从使用 Wix 创建的 MSI 运行卸载时，我需要在尝试删除任何文件之前强行终止在后台运行的进程。主要应用程序由一个托盘图标组成，它反射(reflect)了 bg 进程监控本地 Windows 服务的
我想编写 Ant 任务来自动执行启动服务器的任务，然后使用我的应用程序的 URL 打开 Internet Explorer。 显然我必须执行 startServer先任务，然后 startApplic
使用 ASP.NET 4.5，我正在尝试使用新的 async/await 玩具。我有一个 IDataReader 实现类，它包装了一个特定于供应商的阅读器(如 SqlDatareader)。我有一个简
使用命令 gradle tasks可以得到一份所有可用任务的报告。有什么方法可以向此命令添加参数并按任务组过滤任务。 我想发出类似 gradle tasks group:Demo 的命令筛选所有任务并
除了sshexec，还有什么办法吗？任务要做到这一点？我知道您可以使用 scp 复制文件任务。但是，我需要执行其他操作，例如检查是否存在某些文件夹，然后将其删除。我想使用类似 condition 的东
假设我有字符串 - "D:\ApEx_Schema\Functions\new.sql@@\main\ONEVIEW_Integration\3" 我需要将以下内容提取到 diff 变量中 - 文档名
我需要编写一个 ant 任务来确定某个文件是否是只读的，如果是，则失败。我想避免使用自定义选择器来为我们的构建系统的性质做这件事。任何人都有任何想法如何去做？我正在使用 ant 1.8 + ant-c
这是一个相当普遍的计算机科学问题，并不特定于任何操作系统或框架。 因此，我对与在线程池上切换任务相关的开销感到有些困惑。在许多情况下，给每个作业分配自己的特定线程是没有意义的(我们不想创建太多硬件线程
我正在使用以下 Ansible playbook 一次性关闭远程 Ubuntu 主机列表: - hosts: my_hosts become: yes remote_user: my_user
如何更改 Ant 中的当前工作目录？ Ant documentation没有 任务，在我看来，最好的做法是不要更改当前工作目录。 但让我们假设我们仍然想这样做——你会如何做到这一点？谢谢! 最佳答案
是否可以运行 cronjob每三天一次？或者也许每月 10 次。 最佳答案 每三天运行一次 - 或更短时间在月底运行一次。 (如果上个月有 31 天，它将连续运行 2 天。) 0 0 */3 * *
如何在 Gradle 任务中执行托管在存储库中的工具？ 在我的具体情况下，我正在使用 Gradle 构建一个 Android 应用程序。我添加了一项任务，将一些 protobuf 数据从文本编码为二进
我的项目有下一个结构: Root |- A |- C (depends on A) \- B (depends on A) 对于所有子项目，我们使用自己的插件生成资源:https://githu
我设置了一个具有4个节点的Hadoop群集，其中一个充当HDFS的NameNode以及Yarn主节点。该节点也是最强大的。 现在，我分发了2个文本文件，一个在node01(名称节点)上，一个在node
在 TFS 2010 中为多个用户存储任务的最佳方式是什么？我只能为一项任务分配一个。 (例如:当我计划向所有开发人员演示时) (这是一个 Scrum Msf 敏捷项目，其中任务是用户故事的一部分)
我是一名优秀的程序员,十分优秀！