Не работает функция добавления таска в TODO

function myData(dateId, timeId) //Выводит дату по клику, РАБОТАЕТ 
{ 
  temp_date = new Date(); 
  day = temp_date.getDate(); 
  month = temp_date.getMonth() + 1; 
  year = temp_date.getFullYear(); 
  hours = temp_date.getHours(); 
  minutes = temp_date.getMinutes(); 
 
  if (day < 10) { 
    day = "0" + day; 
  } 
 
  if (month < 10) { 
    month = "0" + month; 
  } 
  if (hours < 10) { 
    hours = "0" + hours; 
  } 
 
  if (minutes < 10) { 
    minutes = "0" + minutes; 
  } 
  document.getElementById(dateId).innerHTML = day + "." + month + "." + year; 
  document.getElementById(timeId).innerHTML = hours + ":" + minutes; 
 
 
  // Добавление тасков 
 
  const addButton = document.getElementById('add'); 
  //addButton.className = "button"; 
  const inputTask = document.getElementById('inp'); 
  inputTask.className = "input_task"; 
  const unfinishedTasks = document.getElementById('unfinished_tasks'); 
  unfinishedTasks.className = "todos"; 
  const finishedTasks = document.getElementById('finished_tasks'); 
 
  function createNewElement(task) { 
    let listItem = document.createElement('li'); 
    let checkbox = document.createElement('span'); //Создаем элемент 
    checkbox.className = "block_input"; //Задаем класс элементу 
    checkbox.innerHTML = task; 
    //checkbox.innerHTML = "<i class="fa fa-sort-asc fa-2x" aria-hidden="true"></i>"; 
    //Вставляем элемент внутрь - checkbox 
 
    listItem.appendChild(checkbox); 
 
    return listItem; 
  } 
 
  function addTask() { 
    if (inputTask.value) { 
      let listItem = createNewElement(inputTask.value); 
      unfinishedTasks.appendChild(listItem); 
      inputTask.value = ""; 
    } 
 
    addButton.onclick = addTask; 
 
  } 
}

* { 
  /*border: 1px solid red;*/ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.container { 
  margin: 0 auto; 
  max-width: 1300px; 
} 
 
h1 { 
  font-family: sans-serif; 
  font-weight: 600; 
  color: #373737; 
  font-size: 100%; 
  margin: 5% 0 2% 38%; 
} 
 
input { 
  border: 0; 
  color: #bcbcbc; 
  white-space: normal; 
  text-align: left; 
  padding-left: 5px; 
} 
 
.input_task { 
  border-bottom: 2px solid #e1e1e1; 
  width: 625px; 
  height: 24px; 
} 
 
.input_add { 
  display: flex; 
  flex-direction: row; 
  text-align: center; 
  margin-left: 123px; 
  height: 30px; 
  color: white; 
} 
 
#add { 
  padding: 10px 0; 
  width: 110px; 
  height: 20; 
  background: #0097f4; 
  border: 0; 
  color: white; 
  border-radius: 4px; 
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5); 
  margin-left: 20px; 
} 
 
.sort { 
  display: flex; 
  flex-direction: row; 
  margin-top: 20px; 
} 
 
.number { 
  margin: 5px 20px 0 20px; 
  display: flex; 
  flex-direction: column; 
  width: 25px; 
  align-items: center; 
} 
 
.search { 
  margin-left: 40px; 
  margin-top: 10px; 
  width: 514px; 
  height: 38px; 
  border-bottom: 2px solid #a6a6a6; 
} 
 
.number p { 
  color: #ada6a7; 
  font-family: sans-serif; 
  font-weight: 600; 
} 
 
.fa-sort { 
  color: #ada6a7; 
  margin: 0 40px; 
} 
 
.fa-sort-asc { 
  color: #ada6a7; 
  margin-bottom: -19px; 
} 
 
.fa-sort-desc { 
  color: #ada6a7; 
  margin-top: -21px; 
} 
 
.fa-search { 
  color: #ada6a7; 
  margin-top: 14px; 
  left: -39%; 
  position: relative; 
  z-index: 1; 
  float: left; 
} 
 
.fa-filter { 
  color: #ada6a7; 
  margin: 14px 0 0 47px; 
} 
 
.block { 
  display: flex; 
  flex-direction: row; 
  margin-top: 20px; 
} 
 
.data { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding: 0 18px 0 10px; 
} 
 
.data__number { 
  font-size: 135%; 
} 
 
.data__time {} 
 
.block_number { 
  padding: 5px 14px; 
  margin: 7px 0; 
  background: #717171; 
  color: white; 
  font-family: sans-serif; 
  height: 26px; 
} 
 
.block_angle { 
  display: flex; 
  flex-direction: column; 
  margin: 7px 10px 0 20px; 
} 
 
.block_input { 
  color: black; 
  width: 516px; 
  border-radius: 4px; 
} 
 
li { 
  list-style-type: none; 
} 
 
.todos { 
  height: 55px; 
  width: 516px; 
  border: 1px solid red; 
  padding-top: 18px; 
  background: #eeeeee; 
  /*display: flex; 
    justify-content: center; 
    text-align: center;*/ 
} 
 
.block_input2 { 
  background: #d1eef4; 
  color: black; 
  width: 516px; 
} 
 
.block_input3 { 
  background: #eeeeee; 
  color: black; 
  width: 516px; 
  height: 100px; 
} 
 
.fa-angle-up { 
  color: #0097f4; 
} 
 
.fa-angle-down { 
  color: #0097f4; 
} 
 
.fa-pencil { 
  border-radius: 50%; 
  background: #3f8c3f; 
  padding: 11px; 
  color: white; 
  margin: 8px 12px 0 12px; 
  height: 38px; 
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5); 
} 
 
.fa-check { 
  border-radius: 50%; 
  background: #0097f4; 
  padding: 11px; 
  color: white; 
  margin: 8px 12px 0 12px; 
  height: 38px; 
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5); 
} 
 
.fa-trash { 
  border-radius: 50%; 
  background: #0097f4; 
  padding: 11px; 
  color: white; 
  margin: 8px 12px 0 12px; 
  height: 38px; 
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5); 
} 
 
.small a { 
  padding: 7px 28px; 
  font-size: 90%; 
} 
 
a.not_active { 
  background: #eeeeee; 
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); 
  color: #0097f4; 
} 
 
.delete { 
  width: 14%; 
  height: 99px; 
  background: #eeeeee; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  position: absolute; 
  z-index: 2; 
  right: 11%; 
  top: 29%; 
} 
 
.edit { 
  width: 21%; 
  height: 220px; 
  background: #eeeeee; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  position: absolute; 
  z-index: 3; 
  right: 5%; 
  bottom: 29%; 
} 
 
h2 { 
  font-family: sans-serif; 
  margin-bottom: 22px; 
  font-size: 120%; 
} 
 
h3 { 
  font-family: sans-serif; 
  margin-bottom: 15px; 
} 
 
p { 
  font-family: sans-serif; 
} 
 
.edit__box { 
  background: #fffafa; 
  height: 60%; 
  width: 80%; 
  margin: -10px 0 13px 0; 
  display: flex; 
  align-items: center; 
} 
 
.line { 
  border-right: 2px solid #e1e1e1; 
  width: 3px; 
  height: 270px; 
  position: absolute; 
  z-index: 4; 
  right: 30%; 
  bottom: 43%; 
}

<script src="https://kit.fontawesome.com/0a8ce8c2c2.js" crossorigin="anonymous"></script> 
 
<div class="container"> 
  <h1>TODO LIST</h1> 
  <div class="input_add"> 
    <input type="text" name="name" placeholder="Task" class="input_task" id="inp"> 
 
    <div class="button"> 
      <button onclick="addTask()" id="add">ADD</button> 
    </div> 
  </div> 
  <div class="sort"> 
    <i class="fa fa-sort fa-3x" aria-hidden="true"></i> 
    <div class="number"> 
      <i class="fa fa-sort-asc fa-2x" aria-hidden="true"></i> 
      <p>123</p> 
      <i class="fa fa-sort-desc fa-2x" aria-hidden="true"></i> 
    </div> 
    <input name="name" value="" class="input_task search"> 
    <i class="fa fa-search fa-2x" aria-hidden="true"></i> 
    <i class="fa fa-filter fa-2x" aria-hidden="true"></i> 
  </div> 
  <div class="block"> 
    <div class="data"> 
      <p class="data__number" id="current_date_time_block">12.10.2018</p> 
      <!-- onload="myData()" --> 
      <p class="data__time" id="current_time_block">13:24</p> 
    </div> 
    <p class="block_number">1</p> 
    <div class="block_angle"> 
      <li class="task_wrapper"> 
        <i class="fa fa-angle-up" aria-hidden="true"></i> 
        <i class="fa fa-angle-down" aria-hidden="true"></i> 
      </li> 
    </div> 
    <ul class="todos" id="unfinished_tasks"> 
      <li> 
        <span onclick="myData('current_date_time_block', 'current_time_block')" class="block_input" id="span_value">Вымыть кухню 
                </span> 
      </li> 
    </ul> 
    <i class="fa fa-pencil" aria-hidden="true"></i> 
    <i class="fa fa-check" aria-hidden="true"></i> 
    <i class="fa fa-trash" aria-hidden="true"></i> 
  </div> 
 
  <!-- <div class="delete delete_active"> 
        <h2>Delete Item?</h2> 
        <div class="button small"> 
            <a class="not_active">NO</a> 
            <a>YES</a> 
        </div> 
    </div> 
 
    <div class="edit edit_active"> 
        <h3>Edit text</h3> 
        <div class="edit__box"> 
            <p>New text of todo item...</p> 
        </div> 
        <div class="button small"> 
            <a class="not_active">CANSEL</a> 
            <a>SAVE</a> 
        </div> 
 
    </div> 
    <div class="line"> 
    </div>--> 
 
</div>