[Javascript 오류] Uncaught ReferenceError: PhoneNumberKeyUp is not defined at HTMLInputElement.onkeyup

오류의 원인

"Uncaught ReferenceError: PhoneNumberKeyUp is not defined" 오류는 JavaScript에서 해당 함수가 정의되지 않았을 때 발생한다. 오류 메시지에 따르면 이 오류는 HTMLInputElement.onkeyup 이벤트 핸들러 내에서 발생했다는 것을 알 수 있다.

 

원인 및 해결방법

원인은 보통 세 가지다. 

 

1. 함수 이름을 정의하지 않음 - 'PhoneNumberKeyUp'라는 함수를 정의하지 않았거나, 오타로 인해 함수 이름이 잘못된 경우.

2. 함수가 스크립트에서 로드되지 않음 - 해당 함수를 포함하는 스크립트 파일이 로드되지 않았거나, 로드되는 순서가 잘못된 경우에도 발생할 수 있다.

3. 함수가 스코프 밖에 있음 - 함수를 선언한 위치가 이벤트 핸들러에서 접근 가능한 스코프에 없는 경우 발생한다.

 

{}를 확인하자.

아래 코드를 보면 fncNameKeyUP 함수와 PhoneNumberKeyUP함수가 따로 정의되고 있다. 간혹 fncNameKeyUp함수 안에 다른 함수 코드를 넣는 경우가 있다. 그런 경우 위 오류가 나타나고 함수가 작동되지 않는다. 중괄호 범위를 확인하고 함수를 따로 정의해 주니 해결됐다. 

function fncNameKeyUp(inputElement) {
      const name = inputElement.value.trim();
      const namePattern = /^[a-zA-Z가-힣]{0,5}$/;

      if (!namePattern.test(name)) {
          alert("이름은 최대 5글자로 입력해주세요. 영어와 한글만 사용 가능합니다.");
          // 입력된 이름에서 길이를 체크하고 초과한 부분을 제거하여 다시 입력창에 설정합니다.
          inputElement.value = name.slice(0, 5);
      }
	}
  
  function PhoneNumberKeyUp() {
      const ph2 = document.getElementById("ph2").value;
      
      // 유효성 검사: 숫자는 4자리여야 함
      const numPattern = /^\d{4}$/;

      // 4자리 입력이 완료된 경우 다음 입력 필드로 이동
      if (ph2.length === 4 && numPattern.test(ph2)) {
          document.querySelector('input[name="ph3"]').focus();
      }
  }