6월 8일 TIL

// HTML 요소와 수정 버튼을 가정합니다.
const element = document.getElementById('myElement');
const editButton = document.getElementById('editButton');

// 수정 버튼에 클릭 이벤트를 추가합니다.
editButton.addEventListener('click', showInputWindow);

// 입력 창을 보여주는 함수입니다.
function showInputWindow() {
  const value = element.textContent; // 현재 요소의 텍스트 내용을 가져옵니다.

  // 입력 창을 동적으로 생성합니다.
  const input = document.createElement('input');
  input.type = 'text';
  input.value = value;

  // 요소 내부에 입력 창을 추가합니다.
  element.innerHTML = '';
  element.appendChild(input);

  // 입력 창에서 엔터 키를 눌렀을 때 값을 적용합니다.
  input.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      const userInput = input.value;
      element.textContent = userInput;
    }
  });

  // 입력 창이 포커스되도록 설정합니다.
  input.focus();
}

위의 코드에서는 getElementById 메서드를 사용하여 수정할 HTML 요소와 수정 버튼을 가져옵니다. 그리고 addEventListener 메서드를 사용하여 수정 버튼에 클릭 이벤트를 추가합니다. 클릭 이벤트가 발생하면 showInputWindow 함수가 호출됩니다.

showInputWindow 함수에서는 다음과 같은 작업을 수행합니다:

현재 요소의 텍스트 내용을 가져옵니다.
input 요소를 동적으로 생성하고 초기값으로 텍스트 내용을 설정합니다.
요소 내부에 input 요소를 추가합니다.
input 요소에서 Enter 키를 누를 때 값을 적용하는 이벤트 리스너를 추가합니다.
input 요소에 포커스를 설정합니다.
이렇게 수정한 코드를 사용하면 "수정" 버튼을 클릭할 때 입력 창이 페이지 내에 나타나고, 사용자가 값을 입력하고 Enter 키를 누르면 해당 요소의 내용이 수정되게 됩니다.