堆棧內存溢出
  簡體   English   中英

JavaScript-動態任務列表-編輯列表

[英]JavaScript - Dynamic To-do list - Editing list

 原文  2016-07-09 17:49:50  4   1    javascript/ jquery/ html/ css

問題描述

對於此待辦事項列表，我可以添加一個列表。 但是，添加后，我在編輯已添加的列表時遇到問題。 我希望單擊“編輯”后，應該能夠編輯信息並上傳已編輯的信息（並確保在單擊“將列表保存到本地存儲”時已編輯的信息已保存在本地存儲中）。 有人可以幫我看看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;
}

1 個解決方案

解決方案1
 0 已采納  2016-07-10 03:44:24

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;

這就是為什么在這里分配> 

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

您單擊編輯按鈕，它發送的不是* 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)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 待辦事項 JavaScript 待辦事項清單和清單項目計算javascript JavaScript 在待辦事項列表項目中無法正常工作 創建待辦事項清單 帶有 localStorage 的待辦事項列表 待辦事項列表有問題 使用純JavaScript刪除待辦事項列表中的列表項 嘗試為 Javascript 中的待辦事項列表應用程序進行過濾但苦苦掙扎 在待辦事項列表上使用 localStorage 嘗試創建待辦事項列表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM