「to do list」API-修正データにバインド

バインドAPI-データの変更
1.実施内容の理解

プロジェクトを開くと、緑のボックスがdisplay=「none」に設定されます.
テキストを修正するときは、青い枠の内容をdisplay=「none」に、緑の枠の内容をdisplay=「block」に変更することに注意してください.
2.コード作成
接続2-1 ChangeEditModeイベントclass="todo"をクリックすると、changeEditModeイベントがトリガーされます.

  const init = () => {
    window.addEventListener('DOMContentLoaded', () => {
      getTodos()
    })
    $form.addEventListener('submit', addTodo)
    $todos.addEventListener('click', toggleTodo)
    $todos.addEventListener('click', changeEditMode)
  }
  init()

2-2 changeEditMode
最近のclass="item"を見つけて要素を接続し、[修正](Modify)ボタンと[キャンセル](Cancel)ボタンをクリックしたときに操作コードを記述します.

  const changeEditMode = (e) => {
    const $item = e.target.closest('.item')
    const $label =$item.querySelector('label')
    const $editinput = $item.querySelector('input[type="text"]')
    const $contentButtons = $item.querySelector('.content_buttons')
    const $editButtons = $item.querySelector('.edit_buttons')
     
    if(e.target.className === 'todo_edit_button') {
      $label.style.display = 'none'
      $editinput.style.display='block'
      $contentButtons.style.display='none'
      $editButtons.style.display='block'
    }
    
    if(e.target.className === 'todo_edit_cancel_button'){
      $label.style.display = 'block'
      $editinput.style.display='none'
      $contentButtons.style.display='block'
      $editButtons.style.display='none'
    }    
  }

接続2-3 EditTodoイベント
修正をfetchに渡すeditTodoイベントを接続し、修正に変更します.

  const init = () => {
    window.addEventListener('DOMContentLoaded', () => {
      getTodos()
    })
    $form.addEventListener('submit', addTodo)
    $todos.addEventListener('click', toggleTodo)
    $todos.addEventListener('click', changeEditMode)
    $todos.addEventListener('click', editTodo)
  }

2-4 editTodo
fetchで変更した内容を転送します.

  const editTodo = (e) => {
    if (e.target.className !== 'todo_edit_confirm_button') return
    const $item = e.target.closest('.item')
    const id = $item.dataset.id
    const $editInput = $item.querySelector('input[type="text"]')
    const content = $editInput.value

    fetch(`${API_URL}/${id}`, {
      method : 'PATCH',
      header: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({
        content
      })
      .then(getTodos)
      .catch((error) => console.error(error.message))      
    })
  }

2-5[修正](Modify)ボタンをクリックすると、テキストがフォーカスされます.changeEditModeで修正を行います.

    if(e.target.className === 'todo_edit_button') {
      $label.style.display = 'none'
      $editinput.style.display='block'
      $contentButtons.style.display='none'
      $editButtons.style.display='block'
      $editinput.focus()  //추가된 내용
    }

ただし、テキストの最後ではなく、テキストの最初の部分に焦点を当てます.

    const value = $editinput.value //(1)value라는 변수에 콘텐츠 내용을 담아둡니다.

    if(e.target.className === 'todo_edit_button') {
      $label.style.display = 'none'
      $editinput.style.display='block'
      $contentButtons.style.display='none'
      $editButtons.style.display='block'
      $editinput.focus()
      $editinput.value ='' //(2) 포커스 시, 콘텐츠 내용을 초기화 합니다.
      $editinput.value = value //(3) 변수에 담아둔 콘텐츠 내용을 가져옵니다.
    }    

初期化2-6修正
変更時にキャンセルボタンを押した場合は、変更ボタンをもう一度クリックすると、以前に行った変更が保持されます.この部分を初期化するためにコードを作成しましょう.

    if(e.target.className === 'todo_edit_cancel_button'){
      $label.style.display = 'block'
      $editInput.style.display='none'
      $contentButtons.style.display='block'
      $editButtons.style.display='none'
      $editInput.value = $label.innerText //추가된 내용
    }