Question

这是任务：在本练习中，您将向“任务管理器”应用添加异常处理。它将使用arguments属性来确保将正确数量的参数传递给函数。完成后，如果未发送正确数量的参数，任务管理器应用程序将显示一条自定义错误消息。

在任务列表库文件（library_tasklist.js）中，修改displaySortedTaskList函数，以便它检查传递给它的参数数量。如果传递了三个参数，则应完成该功能。否则，此函数应使用上面显示的自定义消息创建并抛出错误对象。
在主JavaScript文件中，注释掉对displaySortedTaskList函数的调用。然后，编写一个仅将task数组传递给函数的新调用。现在，运行该应用程序并在“控制台”面板中查看自定义错误消息。
将调用放入try-catch语句内的displaySortedTaskList函数。在语句的catch块中，在id为“ message”的span标记中显示自定义错误消息。

我被卡住了，我的代码没有显示错误，有人可以帮忙吗？

//task_lis.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
var tasks = [];

var displayTaskList = function() {
    // get tasks from storage
    if (tasks.length === 0) {
        tasks = getStorage("tasks_10");
    }
    // display sorted tasks with delete links
    displaySortedTaskList(tasks, $("tasks"), deleteFromTaskList);
    //displaySortedTaskList(tasks);
    
    // set focus on task text box
    $("task").focus();
};

var addToTaskList = function() {   
    var task = $("task");
    if (task.value === "") {
        alert("Please enter a task.");
    } else {
        tasks.push(capitalizeTask(task.value));
        setStorage("tasks_10", tasks);

        task.value = "";
        displayTaskList();
    }
};

var deleteFromTaskList = function() {
    deleteTask(tasks, this.id); // 'this' = clicked link
    setStorage("tasks_10", tasks);
    displayTaskList();
};

var clearTaskList = function() {
    tasks.length = 0;
    clearStorage("tasks_10");
    $("tasks").innerHTML = "";
    $("task").focus();
};

window.onload = function() {
    displayTaskList();
    $("add_task").onclick = addToTaskList;
    $("clear_tasks").onclick = clearTaskList;   
};

//tasklist_library.js
"use strict";
var sortTaskList = function(tasks) {
    var isArray = Array.isArray(tasks);
    if (isArray) {
        tasks.sort();
    }
    return isArray;
};

/*var displaySortedTaskList = function(tasks, div, handler) {
    var html = "";
    var isArray = sortTaskList(tasks);

    if (isArray) {
        //create and load html string from sorted array
        for (var i in tasks) {
            html = html.concat("<p>");
            html = html.concat("<a href='#' id='", i, "'>Delete</a>");
            html = html.concat(tasks[i]);
            html = html.concat("</p>");
        }
        div.innerHTML = html;

        // get links, loop and add onclick event handler
        var links = div.getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = handler;
        }
    }
};*/

var displaySortedTaskList = function(tasks, div, handler) {
    var html = "";
    var isArray = sortTaskList(tasks);

    try{
      if (isArray) {
        for (var i in tasks) {
            html = html.concat("<p>");
            html = html.concat("<a href='#' id='", i, "'>Delete</a>");
            html = html.concat(tasks[i]);
            html = html.concat("</p>");
        }
      if(tasks.length<3){
        throw( "The displySorterdTaskList function of the tasklist library requires three arguments" );
        catch (e) {

        alert("Error:"+e);//print error message on screen

        }
      }
    }
  }

catch (e) {

alert("Error:"+e);//print error message on screen

}
div.innerHTML = html;
// get links, loop and add onclick event handler
var links = div.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
    links[i].onclick = handler;
}
};

var deleteTask = function(tasks, i) {
    var isArray = sortTaskList(tasks);
    if (isArray) { tasks.splice(i, 1); }
};

var capitalizeTask = function(task) {
    var first = task.substring(0,1);
    return first.toUpperCase() + task.substring(1);
};

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: white;
    width: 725px;
    margin: 0 auto;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 { 
    font-size: 150%;
    color: blue;
    margin-bottom: .5em;
}
label {
    float: left;
    width: 8em;
}
input {
    width: 20em;
    margin-right: 1em;
    margin-bottom: 1em;
}
#tasks {
    float: right; 
    width: 25em;
    margin: 0 0 .5em;
	padding: 1em;
	border: 2px solid black;
}
#tasks a {
    margin-right: 0.5em;
}
#message {
    color: red;
}
p {
	margin: 0;
	padding-bottom: .5em;
}
.clear {
    clear: both;
}

<!DOCTYPE html>
<html>
<head>
<title>Ch10 Task Manager</title>
<link type="text/css" rel="stylesheet" href="task_list.css">
<script type="text/javascript" src="library_storage.js"></script>
<script type="text/javascript" src="library_tasklist.js"></script>
<script type="text/javascript" src="task_list.js"></script>
</head>

<body>
    <main>
        <h1>Task Manager</h1>
        <div id="tasks">
            <span id="message">&nbsp;</span>
        </div>
        <label for="task">Task:</label><br>
            <input type="text" name="task" id="task"><br>
        <input type="button" name="add_task" id="add_task" value="Add Task"><br>
        <input type="button" name="clear_tasks" id="clear_tasks" value="Clear Tasks">
        <div class="clear"></div>
    </main> 
</body>
</html>

错误对象和try-catch语句出现问题

0 个答案: