如何用JavaScript在一个列表中添加多个条目？

问题描述 投票：0回答：1

我有一个临时任务列表的程序，我正在做，应该允许用户通过用逗号分隔任务来输入多个任务。我不知道如何写一部分代码来实现这个功能。我试图让列表本身也分开，这样如果用户需要删除一个任务，所有的任务也不会被删除。

"use strict";
var $ = function(id) { return document.getElementById(id); };

var tasks = [];

var displayTaskList = function() {
    var list = "";
    // if there are no tasks in tasks array, check storage
    if (tasks.length === 0) {
        // get tasks from storage or empty string if nothing in storage
        var storage = localStorage.getItem("tasks") || "";

        // if not empty, convert to array and store in global tasks variable
        if (storage.length > 0) { tasks = storage.split("|"); }
    }
    
    // if there are tasks in array, sort and create tasks string
    if (tasks.length > 0) {
        tasks.sort();
        list = tasks.join("\n");
    }
    // display tasks string and set focus on task text box
    $("task_list").value = list;
    $("task").focus();
};

var addToTaskList = function() {   
    var task = $("task");
    if (task.value === "") {
        alert("Please enter a task.");
    } else {  
        // add task to array and local storage
        tasks.push(task.value);
        localStorage.tasks = tasks.join("|");

        // clear task text box and re-display tasks
        task.value = "";
        displayTaskList();
    }
};

var clearTaskList = function() {
    tasks.length = 0;
    localStorage.tasks = "";
    $("task_list").value = "";
    $("task").focus();
};

window.onload = function() {
    $("add_task").onclick = addToTaskList;
    $("clear_tasks").onclick = clearTaskList;    
    displayTaskList();
};
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: white;
    width: 700px;
    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: 22em;
    margin-right: 1em;
    margin-bottom: 1em;
}
#tasks {
    margin-top: 0;
    float: right;
}
<!DOCTYPE html>
<html>
<head>
    <title>Ch09 Task Manager</title>
    <link type="text/css" rel="stylesheet" href="task_list.css">
    <script type="text/javascript" src="task_list.js"></script>
</head>
<body>
  <main>
    <h1>Task Manager</h1>
    <div id="tasks">
        <span id="name">&nbsp;</span>Tasks<br>
        <textarea id="task_list" rows="8" cols="50"></textarea>
    </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">
    <input type="button" name="clear_tasks" id="clear_tasks" value="Clear Tasks"><br>

    <input type="button" name="delete_task" id="delete_task" value="Delete Task">
    <input type="button" name="toggle_sort" id="toggle_sort" value="Toggle Sort"><br>

    <input type="button" name="set_name" id="set_name" value="Set Name">
    <input type="button" name="filter_tasks" id="filter_tasks" value="Filter Tasks"><br>
  </main>
</body>
</html>
javascript html
1个回答
1
投票

我发现很多其他的东西需要修复，所以我做了（主要是与你如何使用jQuery有关）。对我来说，在本地工作。Snippet runner不想做一些这样的东西--抱歉! 不知道这个问题。

var tasks = [];

var displayTaskList = function() {
  var list = "";
  if (tasks.length === 0) { // if there are no tasks in tasks array, check storage
    var storage = localStorage.getItem("tasks") || ""; // get tasks from storage or empty string if nothing in storage

    if (storage.length > 0) {
      tasks = storage.split("|");
    } // if not empty, convert to array and store in global tasks variable
  }

  if (tasks.length > 0) { // if there are tasks in array, sort and create tasks string
    tasks.sort();
    list = tasks.join("\n");
  }
  $("#task_list").val(list); // display tasks string and set focus on task text box
  $("#task").focus();
};

var addToTaskList = function() {
  var task = $("#task").val();
  console.log(`entering addtotask list with task value = ${task}`);
  if (task === "") {
    alert("Please enter a task.");
  } else {
    if (task.indexOf(',') === -1) {
      tasks.push(task); // add task to array and local storage
    } else {
      const split = task.split(','); // 2 lines for readability
      split.forEach(atask => {
        tasks.push(atask);
      });
    }
    localStorage.tasks = tasks.join("|");

    $("#task").val(""); // clear task text box and re-display tasks
    displayTaskList();
  }
};

var clearTaskList = function() {
  tasks.length = 0;
  localStorage.tasks = "";
  $("#task_list").val("");
  $("#task").focus();
};

window.onload = function() {
  $("#add_task").on('click', function() {
    addToTaskList();
  });
  $("#clear_tasks").on('click', function() {
    clearTaskList();
  });
  displayTaskList();
};
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  background-color: white;
  width: 800px;
  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: 22em;
  margin-right: 1em;
  margin-bottom: 1em;
}

#tasks {
  margin-top: 0;
  float: right;
}
<body>
  <main>
    <h1>Task Manager</h1>
    <div id="tasks">
      <span id="name">&nbsp;</span>Tasks<br>
      <textarea id="task_list" rows="8" cols="50"></textarea>
    </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">
    <input type="button" name="clear_tasks" id="clear_tasks" value="Clear Tasks"><br>

    <input type="button" name="delete_task" id="delete_task" value="Delete Task">
    <input type="button" name="toggle_sort" id="toggle_sort" value="Toggle Sort"><br>

    <input type="button" name="set_name" id="set_name" value="Set Name">
    <input type="button" name="filter_tasks" id="filter_tasks" value="Filter Tasks"><br>
  </main>

  <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.