title: How do I add multiple entries in a list in JavaScript
body: <p>I have a program for a makeshift task list that I am working on that should allow a user to enter more than one task by separating the tasks with a comma. I am not sure how I would write a portion of code to allow this function. I am trying to also make the lists themselves separate so if a user needed to delete a task, all the tasks would not be deleted too.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>"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 &gt; 0) { tasks = storage.split("|"); }
      }
      
      // if there are tasks in array, sort and create tasks string
      if (tasks.length &gt; 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();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Ch09 Task Manager&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="task_list.css"&gt;
      &lt;script type="text/javascript" src="task_list.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;main&gt;
      &lt;h1&gt;Task Manager&lt;/h1&gt;
      &lt;div id="tasks"&gt;
          &lt;span id="name"&gt;&amp;nbsp;&lt;/span&gt;Tasks&lt;br&gt;
          &lt;textarea id="task_list" rows="8" cols="50"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;label for="task"&gt;Task&lt;/label&gt;&lt;br&gt;
      &lt;input type="text" name="task" id="task"&gt;&lt;br&gt;
  
      &lt;input type="button" name="add_task" id="add_task" value="Add Task"&gt;
      &lt;input type="button" name="clear_tasks" id="clear_tasks" value="Clear Tasks"&gt;&lt;br&gt;
  
      &lt;input type="button" name="delete_task" id="delete_task" value="Delete Task"&gt;
      &lt;input type="button" name="toggle_sort" id="toggle_sort" value="Toggle Sort"&gt;&lt;br&gt;
  
      &lt;input type="button" name="set_name" id="set_name" value="Set Name"&gt;
      &lt;input type="button" name="filter_tasks" id="filter_tasks" value="Filter Tasks"&gt;&lt;br&gt;
    &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>