待办事项列表使用JavaScript/HTML

我已经建立了这个待办事项列表，几乎所有工作都很完美。但是，如果我删除列表中的所有内容。它不会让我添加一个新的条目，我似乎无法弄清楚为什么。只要列表中至少有一个条目，它就会正常工作。待办事项列表使用JavaScript/HTML

任何帮助非常感谢你。

<head> 
 
    < script type = "text/javascript" > 
 
    /*<![CDATA[*/ 
 
    function addTask() { 
 
    if (document.forms[0].newtask.value == "") 
 
     window.alert("You must enter a value in the New Task field."); 
 
    else { 
 
     if (document.forms[0].tasks.options[0].value == "tasks") 
 
     document.forms[0].tasks.options[0] = null; 
 
     var newTask = new Option(); 
 
     newTask.value = document.forms[0].newtask.value; 
 
     newTask.text = document.forms[0].newtask.value; 
 
     var numTasks = document.forms[0].tasks.options.length; 
 
     document.forms[0].tasks.options[numTasks] = newTask; 
 
     document.forms[0].newtask.value = ""; 
 
    } 
 
    } 
 

 
function deleteTask() { 
 
    var selectedTask = 0; 
 
    var taskSelected = false; 
 
    while (selectedTask < document.forms[0].tasks.length) { 
 
    if (document.forms[0].tasks.options[selectedTask].selected == true) { 
 
     taskSelected = true; 
 
     break; 
 
    } 
 
    ++selectedTask; 
 
    } 
 
    if (taskSelected == true) 
 
    document.forms[0].tasks.options[selectedTask] = null; 
 
    else 
 
    window.alert("You must select a task in the list."); 
 
} 
 

 
function ascendingSort() { 
 
    var newTasks = new Array(); 
 
    for (var i = 0; i < document.forms[0].tasks.length; ++i) { 
 
    newTasks[i] = document.forms[0].tasks.options[i].value; 
 
    } 
 
    newTasks.sort(); 
 
    for (var j = 0; j < document.forms[0].tasks.length; ++j) { 
 
    document.forms[0].tasks.options[j].value = newTasks[j]; 
 
    document.forms[0].tasks.options[j].text = newTasks[j]; 
 
    } 
 
} 
 

 
/*]]>*/ 
 
< /script> 
 

 
    <title>To Do List</title > 
 
< /head>

<body> 
 
    <h1>To Do List</h1> 
 
    <form action=""> 
 
    <p>New Task 
 
     <input type="text" size="68" name="newtask" /> 
 
    </p> 
 
    <p> 
 
     <input type="button" value="Add Task" onclick="addTask()" style="width: 150px" /> 
 
     <input type="button" value="Delete Selected Task" onclick="deleteTask()" style="width: 150px" /> 
 
     <br /> 
 
     <input type="button" value="Ascending Sort" onclick="ascendingSort()" style="width: 150px" /> 
 
    </p> 
 
    <p> 
 
     <select name="tasks" size="10" style="width: 500px"> 
 
     <option value="tasks">Tasks</option> 
 
     </select> 
 
    </p> 
 
    </form> 
 
</body>

来源

2014-10-28 Matthew Kelsay

当你删除你有一个空select所有的任务，没有options。

您需要

document.forms[0].tasks.options.length > 0

像这样的东西来保护你的病情在addTask功能：

if (document.forms[0].tasks.options.length > 0 && document.forms[0].tasks.options[0].value == "tasks") 
    document.forms[0].tasks.options[0] = null;

见code updated

来源

2014-10-28 12:14:45 dreyescat

Agh !!!我试过这个，但使用OR而不是AND。谢谢！ – 2014-10-28 12:24:24

当所有任务被删除，然后

  document.forms[0].tasks.options[0].value //throw an error as 

      document.forms[0].tasks.options[0] //is undefiend

所以我作为

   if (typeof document.forms[0].tasks.options[0] != 'undefined' && document.forms[0].tasks.options[0].value == "tasks") 
        document.forms[0].tasks.options[0] = null;

来源

2014-10-28 12:15:29

在这里你的代码崩溃，你可以用你的浏览器的jsconsole

if (document.forms[0].tasks.options[0].value == "tasks")

您尝试读取选项[0]设置选项后.value的[0见]为NULL

document.forms[0].tasks.options[selectedTask] = null;

尽量不要破坏你的数据结构时，删除一个项目

来源

2014-10-28 12:16:51 vkluge

待办事项列表使用JavaScript/HTML

回答

相关问题