純JavaScript創(chuàng)建一個簡單的待辦事項列表
前言
在現(xiàn)代的web開發(fā)中，待辦事項列表是一個常見且實用的功能。它允許用戶記錄、追蹤和完成他們的任務。在這篇文章中，我們將使用純JavaScript來創(chuàng)建一個簡單的待辦事項列表。我們會涉及到HTML結(jié)構(gòu)的創(chuàng)建、CSS樣式的添加以及JavaScript交互的實現(xiàn)。
步驟1： 創(chuàng)建HTML結(jié)構(gòu)
首先，我們需要在HTML文件中定義待辦事項列表的結(jié)構(gòu)。我們可以使用一個輸入框讓用戶輸入任務，一個按鈕來添加任務，以及一個無序列表來顯示任務。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="styles.css" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Todo List</h1>
<input type="text" id="todoInput" placeholder="Enter a new todo">
<button id="addButton">Add Todo</button>
<ul id="todoList">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>步驟2： 添加CSS樣式
接下來，我們可以在一個單獨的CSS文件中添加一些樣式來美化我們的待辦事項列表。例如，我們可以為輸入框、按鈕和列表項添加樣式
/* styles.css */
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
background-color: #F8F9FA;
margin-bottom: 5px;
}步驟3： 使用JavaScript實現(xiàn)交互功能
最后，我們需要在JavaScript文件中編寫代碼來實現(xiàn)待辦事項的添加和顯示功能。我們可以通過為按鈕添加一個事件監(jiān)聽器來實現(xiàn)這一點，當按鈕被點擊時，獲取輸入框的值，創(chuàng)建一個新的列表項，并將其添加到列表中。
// script.js
document.addEventListener('DOMContentLoaded', function() {
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');
addButton.addEventListener('click', function() {
const todoText = todoInput.value.trim(); // 獲取輸入框的值并去除前后的空格
if (todoText) { // 如果輸入框的值不為空
const listItem = document.createElement('li'); // 創(chuàng)建一個新的列表項元素li
listItem.textContent = todoText; // 設置列表項的文本內(nèi)容為輸入框的值
todoList.appendChild(listItem); // 將新的列表項添加到無序列表ul中
todoInput.value = ''; // 清空輸入框的值以便用戶輸入下一個待辦事項
} else {
alert('Please enter a valid todo'); // 如果輸入框的值為空，則顯示一個警告消息提醒用戶輸入有效的待辦事項內(nèi)容。注意這里只是一個簡單的錯誤處理，實際開發(fā)中可能需要更友好的用戶體驗設計。
}
});
});現(xiàn)在，當你打開HTML文件時，你應該能夠看到一個簡單的待辦事項列表應用程序。你可以在輸入框中輸入任務，點擊按鈕將其添加到列表中。每個任務都會作為一個新的列表項顯示在列表中。當然，這只是一個基本示例，你可以根據(jù)自己的需求擴展它，例如添加刪除任務的功能、標記任務為已完成的功能等。希望這篇文章能幫助你了解如何使用JavaScript創(chuàng)建一個待辦事項列表！
總結(jié)
到此這篇關于純JavaScript創(chuàng)建一個簡單的待辦事項列表的文章就介紹到這了,更多相關JS創(chuàng)建待辦事項列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
DHTML form validation...2007-03-03
JavaScript 數(shù)據(jù)元素集合與數(shù)組的區(qū)別說明
我們在獲取一組頁面元素時常會用到getElementsByName()或是getElementsByTagName()方法。2010-05-05
tbody元素支持嵌套的注意方法...2007-03-03
JavaScript+canvas實現(xiàn)五子棋游戲
這篇文章主要為大家詳細介紹了JavaScript+canvas實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了javascript事件冒泡原因、顯示效果及阻止冒泡的方法,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了uniapp,微信小程序中使用 MQTT的問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)從右往左勻速顯示圖片，無縫輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
在寫js的時候,很多時候都會遇到異步轉(zhuǎn)同步的問題,下面這篇文章主要給大家介紹了關于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
下面小編就為大家?guī)硪黄狫S取數(shù)字小數(shù)點后兩位或n位的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10