Input Values

지금까지 작성한 js와 css의 코드를 모두 지우고 html 코드를 수정했다.

input 태그와 button을 추가

실행 결과

그리고 위에 작성한 것들을 login-form이라는 class를 가진 div 태그 안에 넣어주었다.

이제 이것을 통해 js에서 input 태그와 button을 찾을 수 있다.

먼저 login-form 클래스를 찾아 loginForm 변수에 넣어주고

login-form 클래스를 찾아서 변수에 할당함

이렇게 작성한 loginForm에서 input과 button을 찾으면 된다.

input태그와 button태그를 찾아서 각각의 지정된 변수에 할당

 

더 짧게 코드를 작성하려면 이렇게 수정하면 된다.

이번에는 document를 사용했다.

 

이제 전에 배웠던 click event를 loginButton에 연결하여 사용해보자

login 버튼을 클릭하면 콘솔창에 "click"이 출력됨

login 버튼 클릭했을 때

What is your name? 칸에 입력한 텍스트를 값으로 받아서 콘솔창에 출력하고 싶다면 먼저 console.dir()을 통해 loginInput의 내부를 확인한다.

console.dir()을 사용함

input에 대한 정보들을 확인

출력된 input에 대한 정보들 중 value를 찾으면 된다.

비어있음

이 value값은 input태그 안에 있는 텍스트이며 미리 지정해줄 수 있다.

value 값을 hi로 설정하면

입력창에도 hi가 적용된다.

위의 과정을 통해 input 태그의 내용을 가져오려면 어떤 property를 건드려야 하는지 알게되었다.

이제 js에서 loginInput의 value를 출력하는 코드를 작성하면

값을 입력했을 때 그 값이 출력되는 것을 확인할 수 있다.

crissy를 입력 후 login 버튼을 누르면 그 값이 출력됨