我不知道我做错了什么，这是行不通的，我试图做一个任务列表

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

/创建一个数组变量任务检查是否有任何存储任务在浏览器条件语句 - 检查是否存在存储然后将数据导入到阵列IF不数据 - exitx的功能与空数组IF THERE IS - 与退出函数的poplulated阵列/我不知道我做错了什么，这是行不通的，我试图做一个任务列表

此是代码

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

/*显示列表中的任务创建任务数组创建存储列表项的变量LOOP语句 - 将HTML添加到数组中的每个列表项{重复直到} 的末尾替换节标记中的内容with id =“content” cr eates按钮阵列LOOP STATMENT - 在列表中增加了一个EvenListenerr到每个按钮*/

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>

来源

2016-12-13 Talal

你可以把它移到小提琴吗？ –

Typo。请了解如何在浏览器中打开并使用开发者控制台。 'displayTask'中存在一个JavaScript错误，其中'='符号是在“+”后面输入的。当你解决这个问题时，你会在控制台上看到下一个错误 – traktor53

看，只有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

来源

2016-12-13 22:15:17

我不知道我做错了什么，这是行不通的，我试图做一个任务列表

回答

相关问题