我正在为一个项目创建一个带有多个页面的电子JS webapp。到目前为止，我已经为我的待办事项列表功能在不同的文件夹中创建了一个新页面。
我遇到了一个问题，因为当我在表单中输入一个新任务时，当我单击“提交”时，它没有出现。
下面是我单击“添加新任务”后的外观。x1c 0d1x
以下是我尝试添加新任务时的任务列表。
这是我的script.js文件和html文件。我感谢你能给予我的任何帮助！
SCRIPT.JS
window.addEventListener('load', () => {
// Uses ids that was created in html
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");
form.addEventListener('submit', (e) => {
e.preventDefault();// stop the page from refreshing after submitting task
const task = input.value;
// Prevent user from submitting a empty task
if (!task) {
alert("Please enter out the task!");
}
else {
console.log("Success");
return;
}
// Getting task elements to display on page by creating DOM nodes
const task_el = document.createElement("div");
task_el.classList.add("task");
const task_content_el = document.createElement("div");
task_content_el.classList.add("content");
// Set inner value to task
task_actions_el.innerText = task;
task_content_el.appendChild(task_content_el);
task_content_el.appendChild(task_el);
})
})超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task List</title>
<link rel="stylesheet" href="styles.css" />
</head>
<div class="datetime">
<div class="time"></div>
<div class="date"></div>
</div>
<body>
<header>
<h1>Task List</h1>
<form id="new-task-form">
<input
type="text"
name="new-task-input"
id="new-task-input"
placeholder="What do you have planned?" />
<input
type="submit"
id="new-task-submit"
value="Add task" />
</form>
</header>
<main>
<section class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</section>
</main>
<script src="script2.js"></script>
</body>
</html>
1条答案
按热度按时间polhcujo1#
它看起来不像是您正在将创建的task_content_el添加到任务div中。
在结尾处缺少一行，用于将创建的元素附加到html中的某个元素。