我不知道我做错了什么，它不起作用，我正在尝试列出任务清单
[英]i don't know what i did wrong, it doesn't work, i'm trying to make a task list
问题描述
<!DOCTYPE html> <!--Declare the document type and version of HTML-->
<html>
<head><!--Information related to the decument-->
<title>Task List</title>
<link rel="stylesheet" href="mydesign.css">
</head>
<body><!--Information related to display the decument-->
[<img src="cm1XiuT.png" alt="CounterStrike" style="width:100%;height:250pt;">][1]
<input type="text" placeholder="Add Tasks Here..." id="taskValue">
<button id="addBtn" onclick="addTask()">add</button>
<!--horizontal Rule-->
<hr>
<section id="content">
</section>
<script>
/ creates an Array variable tasks checks if there are any stored tasks in the browser Conditional statement - Checks IF there is data stored then imports the data to the array IF not - exitx the function with an empty array IF THERE IS - exits the function with the poplulated array /
/ 创建一个Array变量任务检查浏览器中是否有任何存储的任务条件语句-检查是否存储了数据，如果没有则将数据导入到阵列中-如果不是-用空数组退出函数IF THERE IS-用-退出函数填充数组 /
this is a code 这是一个代码
function creatArray()
{
var taskArray = [];
var tasks = localStorage.getItem("itemList");
if(tasks != null)
{
/*code runs if the condition is met*/
taskArray = JSON.parse(tasks);
}
return taskArray;
}
/*Addsa task to the list Creates an array Creates a variable to store the information in the input fieldset clears the information in the input field Pushes the task into our Array Stores the updated Tasklist in the browser Calls the displayTask Function */
function addTask()
{
var taskList = creatArray();
var task = document.getElementById("taskValue").value;
document.getElementById("taskValue").value = "";
taskList.push(task);
localStorage.setItem("itemList",JSON.stringify(taskList));
displayTask();
}
/*Removes a task from the list creats a variable to store the correct button information.
function removeTask()
{
//remove the tasks from the array
var rID = this.getAttribute("id");
var taskList = createArray();
taskList.splice(rID, 1);
localStorage.setItem("itemList",JSON,stringify(taskList));
displayTask();
}
/*displays Tasks in the list Creates the array of tasks creates the variable to store the list items LOOP statement - adds HTML to each list item in the array {repeats until the end of the } replaces the content in the section tag with id="content" creates a button array LOOP STATMENT - adds an EvenListenerr to each button in the List */
function displayTask()
{
var taskList = createArray();
var showTasks = "<ul>";
for(var i=0; i < taskLIst.length; i++)
{
showTasks += "<li>"+taskList[i]="<button class='rmvBtn'id='"+i+"'>remove</button></li>"
}
showTasks += "</ul>";
document.getElementById("content"),innerHTML =showTasks;
var btnArray = document.getElementById("rmvBtn");
for(i =0; i < btnArray.length; 1++)
{
btnArray[i].addEventListener('click',removeTask);
}
}
displayTask()
</script><!--includes an external javascript file-->
</body>
</html>
1 个解决方案
解决方案1
1 2016-12-13 22:15:17
Look, only javascript and html 看，只有javascript和html
HTML 的HTML
<div id="tasks"></div>
<div>
<input type="text" id="newTaskInput">
<button onclick="add()">Add</button>
</div>
JavaScript 的JavaScript
var tasks = []
function init() {
tasks = load()
renderTasks()
}
init()
function renderTasks() {
var container = document.getElementById('tasks')
var frag = document.createDocumentFragment()
tasks.forEach(function(item, i) {
var div = document.createElement('div')
var text = document.createTextNode(item.name)
div.appendChild(text)
var closeBtn = document.createElement('button')
var btnText = document.createTextNode('x')
closeBtn.appendChild(btnText)
closeBtn.onclick = function() {
remove(i)
}
div.appendChild(closeBtn)
frag.appendChild(div)
})
container.innerHTML = ""
container.appendChild(frag)
}
function add() {
var input = document.getElementById('newTaskInput')
tasks.push({ name: input.value })
renderTasks()
save(tasks)
}
function remove(index) {
tasks.splice(index, 1)
renderTasks()
save(tasks)
}
function save(data) {
localStorage.setItem('tasks', JSON.stringify(data))
}
function load() {
var raw = localStorage.getItem('tasks')
if ( raw ) {
return JSON.parse(raw)
}
return []
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.