Question

对于此待办事项列表，我可以添加列表。但是，一旦添加，我就有问题编辑已经添加的列表。我希望当您单击编辑时，您应该能够编辑信息并上载编辑的信息（并确保在您单击将列表保存到本地存储时将编辑的信息保存在本地存储中）。有人可以帮助我并查看JavaScript代码，看看我做错了什么？以下是HTML，JavaScript和CSS代码：

以下是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;
}

Answer 1

list.listID被指定为“空白”;

来自此＆gt;

//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;

这就是原因何时在此处指定＆gt;

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

您单击编辑按钮，它不是发送* ID而是发送“空白”。

您可能想在此处重新分配ID＆gt;

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)

JavaScript - 动态待办事项列表 - 编辑列表

1 个答案: