Cannot read from undefined

Question

This is a javascript code to set an eventlistener on the edit button, so that when the edit button is clicked the info in the table (in this case a name) and put it in a modal form's text field so it will be edited.But when i run this it gives "undefined" error.

window.onload = function() {
  var list = document.querySelector('ul.list');
  var editButtons = list.querySelectorAll('a.edit');
  var editInput = document.querySelector('#editname');
  var name = list.querySelectorAll('div.name');
  console.log(name);
  for (var i = 0; i < editButtons.length; i++) {
    editButtons[i].addEventListener('click', function() {
      editInput.value = list.getElementsByClassName('name')[i].innerHTML;
    });
  }
};

<ul class="list divider-full-bleed">

  <li class="tile">
    <a class="tile-content ink-reaction">
      <div class="tile-text name" id="name1">Business</div>
    </a>
    <a class="btn btn-flat ink-reaction btn-default edit" href="#offcanvas-edit" data-toggle="offcanvas">
      <i class="fa fa-edit"></i>
    </a>
    <a class="btn btn-flat ink-reaction" href="includes/delete.php?id=1">
      <i class="fa fa-trash"></i>
    </a>
    <input type="hidden" class="id" value="1">
  </li>


  <li class="tile">
    <a class="tile-content ink-reaction">
      <div class="tile-text name" id="name20">Economy</div>
    </a>
    <a class="btn btn-flat ink-reaction btn-default edit" href="#offcanvas-edit" data-toggle="offcanvas">
      <i class="fa fa-edit"></i>
    </a>
    <a class="btn btn-flat ink-reaction" href="includes/delete.php?id=20">
      <i class="fa fa-trash"></i>
    </a>
    <input type="hidden" class="id" value="20">
  </li>

</ul>