[JS] addeventListner의 input value 값이 빈칸일 때

function alertId(e) {
  e.preventDefault();

  setTimeout(() => alert(`입력된 ID: ${id}`), 1000);  
}
const id = document.getElementById('inputName').value;
const btnClick = document.getElementById('buttonSubmit');
btnClick.addEventListener('click', alertId);

이렇게 코드를 작성할 경우 ${id]값은 ""으로 나오게 된다.

 

이유는 브라우저가 실행되었을 때 input에 값은 비어있는데 그 값을 가져왔기 때문이다.

 

따라서 우리가 찾는 값은 값 입력 후 이벤트리스너가 실행된 후에 값을 가져와야 하기 때문에

이렇게 작성해야 한다.

function alertId(e) {
  e.preventDefault();
  const setId = Id.value;
  setTimeout(() => alert(`입력된 이름: ${setId}`), 1000);
}
const Id = document.getElementById('inputId');
const btnClick = document.getElementById('buttonSubmit');

btnClick.addEventListener('click', alertId);