无法从undefined中读取

Question

这是一个javascript代码，用于在编辑按钮上设置eventlistener，这样当单击编辑按钮时，表格中的信息（在本例中为名称）并将其放在模态表单的文本字段中，这样就可以了编辑。但是当我运行它时，它会给出“未定义”错误。

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>