JavaScript - 動的なTo-doリスト - 編集リスト

このTo-doリストでは、リストを追加できます。しかし、一度追加すると、すでに追加されているリストを編集する際に問題が発生しています。編集をクリックすると、情報を編集して編集した情報をアップロードできます（ローカルストレージにリストを保存すると、編集した情報がローカルストレージに保存されます）。誰かが私を助けて、JavaScriptコードを調べて、私が間違っていることを見ることができますか？下記のHTMLは、JavaScriptとCSSのコードである：ファイルをダウンロードする方が簡単であればここでJavaScript - 動的なTo-doリスト - 編集リスト

は、Dropboxのリンクです：https://www.dropbox.com/sh/qaxygbe95xk4jm1/AADPO98m4416d-ysSGjNt12La?dl=0

<html> 
<head> 
    <title>Dynamic To-do List</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="Dynamic To-do List.css"> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script type="text/javascript"></script> 
    <script src="Dynamic To-do List.js" defer="defer"></script> 
</head> 

<body onload="loadList();"> 
    <h1>To-Do List</h1> Click Button to Add List: <a href="#" onclick="showListDiv();">Add List </a> 
    <div id="listFormDiv"> 
     <form id="addListForm"> 
      List name : &nbsp; 
      <input type="text" id="listNameTxt"><br /> 
      Description : &nbsp; <textarea name="description" id="listDescTxt"></textarea><br /> 
      Date: <input type="text" id="listDateTxt"><br /> 
      Urgent (Yes or No) : &nbsp; 
      <select id="listUrgentTxt" name="Urgent"> 
       <option value="Yes"> Yes </option> 
       <option value="No"> No </option> 
      </select><br /> 
      Category : &nbsp; 
      <select id="listCategoryTxt" name="category"> 
       <option value="School"> School </option> 
       <option value="Work"> Work </option> 
       <option value="Home"> Home </option> 
       <option value="Others"> Others </option> 
      </select> 
      <input type="button" id="addListBtn" value="Add List" onclick="addList()" /> 
      <input type="button" id="updateListBtn" value="Update List" onclick="updateList()" style="visibility: hidden" /> 
     </form> 
    </div> 

    <div id="container"> 
     <a href="#" onclick="saveLists();">Save List to Local Storage</a><br /> 
     <a href="#" onclick="clearStorage();">Clear Local Storage</a><br /> 
     <div id="listsDiv"> 
      Add To-Do list here<br /> 
      <a href="#" onclick="hideList();">Hide List</a><br /> 
      <a href="#" onclick="showList();">Show List</a><br /> 
     </div> 
    </div> 
</body> 
</html>

sortableList(); 

$(function() { 
    $("#listDateTxt").datepicker(); 
}); 

function loadList() { 
    console.log(localStorage.getItem("lists")); 

    var taskList = JSON.parse(localStorage.getItem("lists")); 

    if (!taskList) { 
     console.log("There are no tasks saved in the local storage"); 
    } else { 
     for (var i = 0; i < taskList.length; i++) { 
      createListDiv(taskList[i]); 
     } 
    } 
} 

//get a reference to the listFormDiv div tag that has the add To-Do List form. list is a global variable that can be access easily from any function 
var listFormDiv = getElement("listFormDiv"); 
var listArray = Array(); //list will hold all the To-do list added through the form 
var listIDCount = 0; // list variable will be incremented every time a list is added and will be used to assing a unique ID to every list object. 

if (localStorage.getItem("lists")) { 
    listArray = JSON.parse(localStorage.getItem("lists")); 
} 

function clearStorage() { 
    localStorage.clear(); 
    listArray = []; 
} 

function getElement(id) { 
    return document.getElementById(id); 
} 

//function to show the div with the add to-do list form when the add list hyperlink is clicked onLine 
function showListDiv() { 
    //var st = window.getComputedStyle(listFormDiv,null); 
    console.log(listFormDiv); 
    listFormDiv.style.display = "block"; 
} 

//list function adds a list when the "add list" button on the form is pressed - 3rd step 
function addList() { 
    var listName = getElement("listNameTxt").value; 
    var listDesc = getElement("listDescTxt").value; 
    var listDate = getElement("listDateTxt").value; 
    var listUrgent = getElement("listUrgentTxt").value; 
    var listCategory = getElement("listCategoryTxt").value; 

    //create an instance of the list object with the values from the form 
    var f; 

    if (listCategory == "School") { 
     f = new schoolTask(); 
     f.setValues(listName, listDesc, listDate, listUrgent, listCategory, "blue"); 
    } else if (listCategory == "Work") { 
     f = new workTask(); 
     f.setValues(listName, listDesc, listDate, listUrgent, listCategory, "red"); 
    } 

    console.log("school task is " + JSON.stringify(f)); 

    //clear the textboxes in the form 
    getElement("listNameTxt").value = ""; 
    getElement("listDescTxt").value = ""; 
    getElement("listDateTxt").value = ""; 
    getElement("listUrgentTxt").value = ""; 
    getElement("listCategoryTxt").value = ""; 

    var listAddButton = getElement("addListBtn"); 
    var listEditButton = getElement("updateListBtn"); 

    console.log(listAddButton); 
    //listAddButton.style.visibility = "visible"; 
    listEditButton.style.visibility = "hidden"; 
    listFormDiv.style.display = "none"; 

    //add the new list object to the global listArray. 
    listArray.push(f); 

    //increment the listID count 
    listIDCount++; 

    //add the list to the page and pass in the newly created list object to the createListDiv function 
    createListDiv(f) 
} 

// a list object - the second step 
function setValues(name, desc, date, urgent, category, color) { 
    this.name = name; 
    this.desc = desc; 
    this.date = date; 
    this.urgent = urgent; 
    this.category = category; 
    this.color = color; 
} 

function list() {} 

//list.prototype.name = "blank name"; 
list.prototype.name = "blank"; 
list.prototype.desc = "blank desc"; 
list.prototype.date = "blank"; 
list.prototype.urgent = "blank"; 
list.prototype.category = "blank"; 
list.prototype.listID = "blank"; 
list.prototype.color = "blank"; 
list.prototype.setValues = setValues; 
//list.prototype.name = "test"; 

function schoolTask() { 
    this.address = "25 Timau Road"; 
} 

inheritFrom(schoolTask, list); 

function workTask() { 
    this.room = "303f"; 
} 

inheritFrom(workTask, list); 

function inheritFrom(child, parent) { 
    child.prototype = Object.create(parent.prototype); 

} 

//create a div tag to represent the new list and add the new div to the existing place holder div on the page 
function createListDiv(list) { 
    var listDiv = document.createElement("DIV"); 
    listDiv.setAttribute("class", "listClass"); 

    var nameTxt = document.createElement("DIV"); 
    nameTxt.innerHTML = "To-do List Name: " + list.name; 
    nameTxt.id = "nameTxt" + list.listID; 

    var lineBreak = document.createElement("BR"); 

    var descTxt = document.createElement("DIV"); 
    descTxt.innerHTML = "Description: " + list.desc; 
    descTxt.id = "descTxt" + list.listID; 

    var dateTxt = document.createElement("DIV"); 
    dateTxt.innerHTML = "Date: " + list.date; 
    dateTxt.id = "dateTxt" + list.listID; 

    var urgentTxt = document.createElement("DIV"); 
    urgentTxt.innerHTML = "Urgent: " + list.urgent; 
    urgentTxt.id = "urgentTxt" + list.listID; 

    var categoryTxt = document.createElement("DIV"); 
    categoryTxt.innerHTML = "Category: " + list.category; 
    categoryTxt.id = "categoryTxt" + list.listID; 

    var editLink = document.createElement("A"); 
    editLink.setAttribute("onclick", "editList(" + list.listID + ");"); //Note that we are passing the listID from the list object when calling the editList so we know which list object to fetch to edit when we are editing 
    editLink.setAttribute("href", "#"); 
    editLink.id = "editLink" + list.listID; 
    editLink.innerHTML = "Edit"; 

    listDiv.appendChild(nameTxt); 
    listDiv.appendChild(lineBreak); 
    listDiv.appendChild(descTxt); 
    listDiv.appendChild(lineBreak); 
    listDiv.appendChild(dateTxt); 
    listDiv.appendChild(lineBreak); 
    listDiv.appendChild(urgentTxt); 
    listDiv.appendChild(lineBreak); 
    listDiv.appendChild(categoryTxt); 
    listDiv.appendChild(lineBreak); 
    listDiv.appendChild(editLink); 

    getElement("listsDiv").appendChild(listDiv); 
} 

//global variable to remember which element in the listArray we are editing 
var listIndex; 

function editList(listID) { 
    //get the the list object from the array based on the index passed in 
    var list; 

    //show the update list button on the html form and hide the add list button on the same form 
    var listAddButton = getElement("addListBtn"); 
    var listEditButton = getElement("updateListBtn"); 
    listAddButton.style.visibility = "hidden"; 
    listEditButton.style.visibility = "visible"; 

    //iterate through the listsArray until we find the list object that has the same ID as the id passed in to the function 
    for (var i = 0; i < listArray.length; i++) { 
     //if the listID in the list object is the same as the listID passed in to the function then assign the object from the array to the list variable in list function 
     if (listArray[i].listID == listID) { 
      //we found the list with the right ID 
      list = listArray[i]; 
      listIndex = i; 
     } 
    } 

    listFormDiv.style.display = "block"; 

    getElement("listNameTxt").value = list.name; 
    getElement("listDescTxt").value = list.desc; 
    getElement("listDateTxt").value = list.date; 
    getElement("listUrgentTxt").value = list.urgent; 
    getElement("listCategoryTxt").value = list.category; 

    //updateList(listIndex); 
} 

//list function will be called when the update button is pressed on the form 

function updateList() { 
    //save the changed information from the form into the list object in the array based on the array index passed in 
    listArray[listIndex].name = getElement("listNameTxt").value; 
    listArray[listIndex].desc = getElement("listDescTxt").value; 
    listArray[listIndex].date = getElement("listDateTxt").value; 
    listArray[listIndex].urgent = getElement("listUrgentTxt").value; 
    listArray[listIndex].category = getElement("listCategoryTxt").value; 

    var listID = listArray[listIndex].listID; // get the listID from the list object that is in the listsArray at the specificed index; 

    //now reflect the same changes in the DIV that shows the list 
    getElement("nameTxt" + listID).innerHTML = "To-do List Name: " + getElement("listNameTxt").value; 
    getElement("descTxt" + listID).innerHTML = "Description: " + getElement("listDescTxt").value; 
    getElement("dateTxt" + listID).innerHTML = "Date: " + getElement("listDateTxt").value; 
    getElement("urgentTxt" + listID).innerHTML = "Urgent: " + getElement("listUrgentTxt").value; 
    getElement("categoryTxt" + listID).innerHTML = "Category: " + getElement("listCategoryTxt").value; 

    //reset the listIndex to a value that does not exisit in the array index 
    listIndex = -1; 

    var listAddButton = getElement("addListBtn"); 
    var listEditButton = getElement("updateListBtn"); 
    listAddButton.style.visibility = "visible"; 
    listEditButton.style.visibility = "hidden"; 

    //reset form div visibility 
    listFormDiv.style.display = "none"; 

    getElement("listNameTxt").value = ""; 
    getElement("listDescTxt").value = ""; 
    getElement("listDateTxt").value = ""; 
    getElement("listUrgentTxt").value = ""; 
    getElement("listCategoryTxt").value = ""; 
} 

//Sortable list - http://jqueryui.com/sortable/ 
function sortableList() { 
    $("#listsDiv").sortable({ 
     update: function(updateList) { 
      var sortOrder = getElement(list).sortable('listArray').toString(); 
      console.log(sortOrder); 
     } 
    }); 
} 

function saveLists() { 
    localStorage.setItem("lists", JSON.stringify(listArray)); 
} 

//Hide and Show list 
function hideList() { 
    var listsDiv = getElement("listsDiv"); 

    if (listsDiv.style.display == "block") { 
     //listsDiv.style.display = "none"; 
     alert("Find a way to hide the list"); 
    } 
} 

function showList() { 
    var listsDiv = getElement("listsDiv"); 
    if (listsDiv.style.display == "none") { 
     listsDiv.style.display = "block"; 
    } 
}

#listFormDiv { 
    border: 1px solid black; 
    height: 350px; 
    width: 200px; 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    padding: 10px; 
    display: none; 
} 

#listsDiv { /*Possible #listsDiv*/ 
    height: 350px; 
    width: 200px; 
} 

#listDescTxt { 
    height: 100px; 
} 

#container { 
    border: 1px solid black; 
    height: 650px; 
    width: 400px; 
    margin-bottom: 20px; 
    position: absolute; 
    top: 100px; 
    left: 500px; 
} 

.listClass { 
    border: 1px solid red; 
    height: 160px; 
    width: 200px; 
    padding: 5px; 
}

出典

2016-07-09 Vinay R

list.listIDは "空白" が割り当てられ;なぜ

Line 204: editLink.setAttribute("onclick","editList(" + list.listID + ");");

[編集]ボタンをクリックしてください>ここに割り当てられている

//list.prototype.name = "blank name"; 
list.prototype.name = "blank"; 
list.prototype.desc = "blank desc"; 
list.prototype.date = "blank"; 
list.prototype.urgent = "blank"; 
list.prototype.category = "blank"; 
Line 145: list.prototype.listID = "blank"; 
list.prototype.color = "blank"; 
list.prototype.setValues = setValues;

が、それは*のIDが、「空白」がいない送信され、このから来る

> 。

あなたはおそらくここにIDを再割り当てしたい>

Line 110: //Assign the id before you push eg. (f.listID == listIDCount++) 
//add the new list object to the global listArray. 
listArray.push(f); 

//increment the listID count 
//listIDCount++; why am I incrementing? 

//add the list to the page and pass in the newly created list object to the createListDiv function 
createListDiv(f)

出典

2016-07-10 03:44:24

は、あなたの助けにリロイトンプソンありがとうございます。私はあなたが提案した変更を行い、編集リンクが機能しました。ただし、タスク1とタスク2の2つ以上のタスクを追加すると、タスク2を編集すると、タスク1も編集されます。タスク1はタスク2と同じになります。 2つ目は、複数のタスクを追加した後、タスクをソートまたは並べ替えると機能しますが、エラーメッセージが表示されます。 Dynamic To-do List.js：359キャッチされない例外TypeError：プロパティを読み取ることができません 'ソート可能な' ヌルのライン359は、 VARはsortOrder = getElement（リスト）.sortable（ 'listArray'）であるのtoString（）;。これらの問題の原因は何ですか？ –

JavaScript - 動的なTo-doリスト - 編集リスト

答えて

関連する問題