JavaScript - 动态待办事项列表

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

转载作者：行者123 更新时间：2023-11-28 05:35:02

对于这个待办事项列表，我可以添加一个列表。但是，一旦添加，我在编辑已添加的列表时遇到问题。我希望当您单击“编辑”时，您应该能够编辑信息并上传编辑后的信息(并确保在您单击“将列表保存到本地存储”时将编辑后的信息保存在本地存储中)。有人可以帮我检查一下 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;
}

最佳答案

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)

关于JavaScript - 动态待办事项列表 - 编辑列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38284632/

文章推荐： javascript - ajax回调中的闭包循环

文章推荐： swift - 使用闭包时构建失败

文章推荐： javascript - JqGrid 格式化程序按钮(操作)不可见

文章推荐： uikit - 为什么一些 UIKit 函数返回隐式展开的可选值？

JavaScript:动态(动态)创建样式元素的优缺点
在 JavaScript 中，我们可以动态创建元素并附加到部分，以便为大量元素应用 CSS 规则。这种方法的优点或缺点是什么？如果它确实提供了与元素上的 javascript 迭代相比的性
flutter - Flutter Dart:错误_ImmutableMap <动态，动态>' is not a subtype of type ' Map
我有这个代码 import "./HTTPMethod.dart"; import '../../DataModel/DataModel.dart'; mixin RouterMixin { HT
mdx - 动态、动态、OLAP 维度
哪些 OLAP 工具支持动态、动态地创建维度或层次结构？例如，层次结构将成员定义为:“前 5 名”、“前 6-10 名”、“其他”... 计算成员是通常的答案，我正在寻找不同的东西。计算器的问题。成
validation - 动态/动态 CakePhp 3 验证和 FormHelper
我正在 CakePHP 中创建一个“表单编辑器”。该界面允许用户选择要应用于字段的验证，例如数字、电子邮件等因此，我需要根据用户输入为模型动态创建验证。为此，我可以使用验证对象:https://b
java - 动态(动态)生成 Web 服务 - 如何？
这是一个场景: 我有一个Web服务，我们将其称为部署在tomcat(轴)上的StockQuoteService。通过此 Web 服务公开了 getStockQuote() 方法。现在，我想构建一个
dart - 未处理的异常 : InternalLinkedHashMap' is not a subtype of type ' 列表<动态>
我正在尝试从服务器获取 JSON 响应并将其输出到控制台。 Future login() async { var response = await http.get( Uri.
json - Flutter dart json未处理的异常: InternalLinkedHashMap' is not a subtype of type '列表<动态>
我从另一个问题中得到了这段代码(感谢 chunhunghan)。我需要创建一个登录屏幕，并尝试根据服务器发回给我的响应来验证用户凭据，但是每次我尝试运行代码时，它都会给我“未处理的异常:Interna
Dart 代码在我的 Flutter 应用程序中表现不同。列表<动态 >' is not a subtype of type ' 列表< map <字符串，动态>>
当我在“Dart”主程序中运行它时，一切正常，并且我得到了一个与会者列表。但是，当我在我的 Flutter 应用程序中调用它时，出现错误: flutter:“List”类型不是“List>”类型的子类
js实现验证码干扰(动态)
本文实例为大家分享了js实现验证码动态干扰的具体代码，供大家参考，具体内容如下效果一效果二代码一 ?
Cloudflare 动态 DNS
目前我正在为我的网站使用 No-Ip，我想使用 cloudflare 来抵御 ddos 和机器人程序。我注意到您需要一个用于 cloudflare 的域。我还搜索了网络，发现了一个叫做 cloud
vba - 动态 IF 语句
有没有办法在 Excel VBA 中构建动态 if 语句？基本上我正在尝试创建一个参数化计算，用户将能够输入不同的变量，即变量 1 “变量 2” “变量 3” 在这种情况下变量 1 是单元格引用
vba - 格式化(动态)
大家好，请查看上面的图片，我有两张 table 。在下面代码的第一个表中，我得到了这种格式。但我想像 Table2 那样格式化，每个合并单元格中的行数是动态的，而且不一样。有没有办法像table
header - 动态 heightForHeaderInSection
如何根据我添加的 View 修改标题部分的高度？heightForHeaderInSection在 viewForHeaderInSection 之前被调用我不知道 View 大小，直到我创建它。最
parsing - 动态 (?) 解析器
是否存在在运行时生成 AST/解析树的解析器？有点像一个库，它会接受一串 EBNF 语法或类似的东西并吐出数据结构？我知道 antlr、jlex 和他们的同类。他们生成可以做到这一点的源代码。 (喜
Django 动态 OR 查询
我在持有汽车制造商的表格上有一个 MultipleChoiceField。我想将我的汽车数据库过滤到已检查的品牌，但这会导致问题。如何动态获取所有 Q(make=...) 语句？我如何开始:['va
PHP 动态 preg_replace
$end = preg_replace($pattern, $replacement, $str); 如何使替换字符串 $replacement 随 $str 中的每次匹配而变化？例如，我想用关联的图
excel - 在VBA中获取表范围(动态)
我正在编写一个 VBA 程序，用于过滤表中的值。我试图使其成为一个适用于您提供的所有表格的通用程序。在我的程序中，我必须设置它正在过滤的表的范围:Set rng = dataSheet.Range("
javascript - 动态/递归结构中的切换按钮
我正在循环一个元素数组，并且我想使用给定的模板递归地显示该元素然后在该模板内使用带有切换功能的按钮来显示/隐藏给定元素的Child的更深级别模板(Child也是一个元素) 这是我的模板
javascript - 使用对象选择要运行的函数(动态)
从客户端(html)发送表单，服务器端通过选择选项之一决定运行哪个函数。 const decideWho = (form) => { const choice = form.choice; c
java - 动态/编程设置具有可绘制背景的按钮的大小
我有一个具有以下属性的按钮: circle_normal.xml(在 res/drawable 中) circle.xml(在 res/drawable 中)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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