我不知道我做错了什么，它不起作用，我正在尝试制作任务列表

<!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>

/创建一个数组变量任务检查是否存储了浏览器条件语句中的任务 - 检查是否有存储的数据然后将数据导入数组，如果不是-Exitx 如果有 - 如果有空数组的功能 - 以 - 退出功能 poplaled Array /

这是一个代码

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任务创建一个数组创建一个变量将信息存储在输入字段集中清除信息在输入字段中，将任务推入我们的数组存储浏览器中更新的任务列表调用DisplayTask函数 */

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();
            }

/*从列表中删除任务会创建一个变量来存储正确的按钮信息。这个 - 如已经在"这个"按钮中单击创建一个数组可从我们的数组中删除任务，并且定义我们需要删除呼叫displayTask的几项功能 */

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();
            }

/*在列表中显示任务创建任务的数组创建存储列表项循环语句的变量 - 将HTML添加到数组中的每个列表项目{重复直到}结束} 用ID =" content"替换"章节标签"中的内容创建一个按钮阵列循环陈述 - 添加一个extlistenerr 列表中的每个按钮 */

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>

看，只有javascript和html

html

  <div id="tasks"></div>
  <div>
     <input type="text" id="newTaskInput">
     <button onclick="add()">Add</button>
  </div>

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 []
}

demo

相关内容

最新更新

热门标签：