유효성 검사하기 중 getElementsByName 이 작동하지 않을 때

간단히 ID, PW ,  연락처 입력 폼에 대해 유효성검사를 해보기로했다.

먼저 간단히 입력 폼을 HTML로 만들어 보았다. 

 

 

See the Pen zYGgJdL by JihaLee (@ayus91) on CodePen.

 

See the Pen jOPgerp by JihaLee (@ayus91) on CodePen.

먼저 HTML문서에서 ID를 가져와서 정상적으로 잘 가져온건지 Console을 실행해보았다.

그러나 전혀 작동하지 않아 당황했고, Input 의 속성을 Name이 아닌  ID로 바꾸니 잘되었다..

 

왜그런지 찾아보니 stackoverflow에서 getElementsByName은 NodeList를 반환하기 때문에 Index로 접속해야 한다고 한다.  (https://stackoverflow.com/questions/6967297/getelementsbyname-not-working)

 

그래서 Index[0]을 넣어주니 잘 작동하였다. 

 

See the Pen LYVwgyG by JihaLee (@ayus91) on CodePen.

콘솔창에 hi가 나오는것을 확인할 수 있다.

 

이제 HTML문서에서 요소를 잘 가져왔으니 위에 적은 목표대로 작동할 수 있게 만들차례이다.