Reputation: 83

I want to change to an arrow function

Excuse the question.

I am making a todo list.

Originally, the following function was written on line 57.

function deleteElement(){
        const tableTag = this.closest('tr');
        if (tableTag) tableTag.remove();
        updateId();
      }

I want to change to an arrow function, but I get an error.

【Error name】 main.js:54 Uncaught ReferenceError: Cannot access'deleteElement' before initialization

【Question】 How can we make it an arrow function?

{
  document.addEventListener('DOMContentLoaded', () => {
    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
    let nextId = 0;
    const todos = [];

    //Taskとidを作成
    const addTask = (task, id, tableItem) => {
      const idSpanTd = document.createElement('td');
      const taskSpanTd = document.createElement('td');
      //タスク追加時にtodosにtodoを追加 
      const todo = {
        task: 'taskSpanTd',
        status: '作業中'
      };
      todos.push(todo);
      //要素内のHTML文章を変更する
      idSpanTd.innerText = id;
      taskSpanTd.innerText = task;
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(idSpanTd);
      tableItem.append(taskSpanTd);
      addTaskTarget.append(tableItem);
    };

    //Button要素を生成する
    const addButton = (tableItem, removeButton, createButton) => {
      const createButtonTd = document.createElement('td');
      const removeButtonTd = document.createElement('td');
      //要素内のHTML文章を変更する
      createButton.innerText = '作業中';
      removeButton.innerText = '削除';
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(createButtonTd);
      tableItem.append(removeButtonTd);
      addTaskTarget.append(tableItem);
      //生成したbutton要素を生成する
      createButtonTd.append(createButton);
      removeButtonTd.append(removeButton);
    };

    //追加ボタンをクリックした際にtd要素を追加する処理を行う
    addTaskTrigger.addEventListener('click', () => {
      const task = addTaskValue.value;
      const tableItem = document.createElement('tr');
      const removeButton = document.createElement('button');
      const createButton = document.createElement('button');
      addTask(task, nextId++, tableItem);
      addButton(tableItem, removeButton, createButton);
      addTaskValue.value = '';
      removeButton.addEventListener('click', deleteElement, false);

      // //削除ボタンを押した時にタスクを削除する
    const deleteElement = () => {
        const tableTag = this.closest('tr');
        if (tableTag) tableTag.remove();
        updateId();
      }

      //ボタンを押したら作業中、完了中と変わる
      createButton.addEventListener('click', () => {
        if (createButton.textContent === "作業中") {
          createButton.textContent = "完了";
        } else {
          createButton.textContent = "作業中";
        }
      });
    })

    //　連番　再振り分け
    const updateId = () => {
      const tbody = document.getElementsByTagName("tbody")[0];
      const taskList = tbody.getElementsByTagName('tr');
      nextId = 0;
      Array.from(taskList, tr => {
        tr.getElementsByTagName('td')[0].textContent = nextId;
        nextId++
      });
    }
  });
}

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Todoリスト</title>
</head>

<body>
  <h1>Todoリスト</h1>
  <p>
    <input type="radio" name="status" value="1" checked="checked">全て
    <input type="radio" name="status" value="2">作業中
    <input type="radio" name="status" value="3">完了
  </p>
  <p></p>
  <table>
    <thead>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
      <th></th>
    </thead>
    <tbody class="addTask-target" id="tbody"></tbody>
  </table>
  <h2>新規タスクの追加</h2>
  <input class="addTask-value" type="text" />
  <button class="addTask-trigger" type="button">追加</button>
  <script src="js/main.js"></script>
</body>

</html>

Upvotes: 0

Answers (2)

kingkupps

Reputation: 3494

EDIT: Same thing as @yusung lee's answer.

You need to move your declaration of deleteElement above the line that adds it as a listener with removeButton.addEventListener(...).

Functions defined using function name() { } syntax are hoisted as are variables declared with the var keyword. Things declared with const are not hoisted.

Upvotes: 1

yusung lee

Reputation: 366

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init

Move

const deleteElement = () => {}

to before access.(removeButton.addEventListener('click', deleteElement, false);)

Upvotes: 2

I want to change to an arrow function

Answers (2)

Related Questions