javascript - 单击“添加任务”后,如何让我的文本出现在任务下?
问题描述
我正在尝试将自定义文本添加到我的“任务”中,当我单击“任务列表”中的添加文本按钮时,它只出现在地址栏中。目标是在我单击添加任务后在“任务列表”下创建一个列表项。第一个代码块是我的 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 = '';
});
推荐阅读
- http - 如何使用 Outlook 自适应卡中的“Input.Date”值制作 http 帖子?
- c++ - C++ 随机数生成器只生成 0 - C++ 11
- c# - 由于某些奇怪的原因,托管 C# 应用程序将字符串作为空字节 [] 传递... IronPDF
- python-3.x - 通过美汤python从html div类中提取文本元素
- arrays - 如何使用 reactjs 和 graphql 在 gatsby 中映射嵌套数组
- reactjs - 无法弄清楚为什么我的代码不会呈现
- r - 我们如何找到与列的特定数据点最近的行?
- android - 我是第一次来,不能使用 Admob 实现,有些错误
- c - g++ Mac Curl 架构 x86_64 的未定义符号
- php - 在laravel 6中返回带有状态码和数据的json响应