버튼 클릭으로 단계별 인풋 필드 보이기

문제 상황과 해결 목표

웹 개발을 하다 보면, 사용자에게 여러 단계를 거쳐 정보를 입력받아야 하는 경우가 있다. 예를 들어, 회원 가입이나 설문 조사 같은 경우가 있을 수 있다. 이때, 버튼을 클릭하면 다음 단계의 입력 필드가 나타나는 형태로 구현하고 싶을 수 있다.

문제 상황에서 사용자가 StackOverflow에 올린 코드의 주된 문제점은 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 에러가 발생하는 것이다. 이 에러는 특정 DOM 요소에 이벤트 리스너를 추가하려고 했지만, 그 요소가 실제로 존재하지 않아서 발생한다.

에러 해결 방법

DOM 로딩 완료 확인

첫 번째로 확인해야 할 것은 DOM(Document Object Model)이 완전히 로드되었는지 여부다. JavaScript에서는 DOMContentLoaded 이벤트를 사용하여 DOM 로딩이 완료되었는지 확인할 수 있다. 이 이벤트가 발생하면, 이후에 DOM 요소를 조작하는 코드를 실행하면 된다.

document.addEventListener("DOMContentLoaded", function() {
  // 여기에 코드 작성
});

코드 수정

에러가 발생한 원인을 알았으니 코드를 수정해야 한다. 이 문제를 해결하기 위해서는 아래와 같은 코드를 사용할 수 있다.

document.addEventListener("DOMContentLoaded", function() {
  var button = document.getElementById("nextButton");
  var inputFields = document.querySelectorAll(".input-step");
  var currentStep = 0;

  button.addEventListener("click", function() {
    if (currentStep < inputFields.length) {
      inputFields[currentStep].style.display = "block";
      currentStep++;
    }
  });
});

결론

이렇게 하면 버튼을 클릭할 때마다 새로운 입력 필드가 나타난다. DOMContentLoaded 이벤트를 사용하여 DOM이 완전히 로드된 후에 코드가 실행되도록 했기 때문에, Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 에러를 해결할 수 있다. 이 방법을 통해 다양한 웹 어플리케이션에서 유용하게 사용할 수 있다.