Question

我试图在“任务”中添加自定义文本，当我在“任务列表”中单击“添加文本”按钮时，它仅显示在地址栏中。目的是在我单击添加任务后在“任务列表”下创建一个列表项。第一个代码块是我的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>

Answer 1

仅作一些修改：

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 = '';
});

单击“添加任务”后，如何使我的文本显示在任务下？

1 个答案: