이번에는 유저가 이름을 제출했을 때 해당 form 자체를 사라지게 하는 것을 구현해보기로 했다.
우리는 이 form을 css로 지울 수 있는데,
이를 위해 hidden이라는 class를 가진 요소를 지워지게 하는 css 코드를 작성했다.
이제 html의 form 태그에 hidden이라는 class를 추가하면 새로고침 후 form이 사라지는 것을 확인할 수 있는데, 여기에 JS를 사용하여 이름을 입력했을 때만 form을 사라지게 하도록 구현해보자
먼저 form의 submit이라는 기본 동작을 막아주는 preventDefault()를 사용한 다음 username을 loginInput.value에 저장해 주고, loginForm에 hidden이라는 class를 추가해주는 코드를 작성했다.
이것을 실행 해보면 form은 사라졌지만 입력 값은 console에 기록되는 것을 확인할 수 있다.
다음 단계로 넘어가서, 기본 값으로 hidden이라는 class를 가진 h1 태그(다른 html 요소)를 추가해보았다.
이제 form은 숨기고, h1은 표시되도록 코드를 작성해볼텐데, h1에 표시할 텍스트가 있을 때만 표시되도록 해보자
그러기 위해서 유저의 이름을 변수로 저장한 다음, 그 이름을 h1안에 넣어줘야 하는데 그전에 먼저 h1 태그에 id를 추가했다.
그런 다음 JS로 돌아와서 그 아이디(greeting)을 찾아주는 코드를 작성했다.
이제 h1 안에 greeting에 있는 텍스트를 추가하도록 해보자
이렇게 코드를 작성하고 실행하면, form은 사라지지만 h1은 나타나지 않는 것을 확인할 수 있다.
h1의 내용이 화면에 나타나게 하려면 hidden이라는 class를 제거해줘야 하므로 classList.remove() 를 사용했다.
그런데 함수 안에서 hidden을 두 번이나 사용하기 때문에 변수를 새로 만들어 그것으로 대체했다.
이제 새로고침 후 실행을 하면 이름을 입력했을 때, form이 사라지고 h1이 나타나는 것을 확인할 수 있다.
두 동작은 string과 변수를 하나로 합쳐준다는 점에서 같은데, 아래의 방법이 좀 더 편하다.
$ 를 사용하는 방법은 두 가지 규칙이 있는데, 먼저 변수와 string을 결합하고 싶거나 변수를 string 안에 집어넣고 싶다면 ${변수명} 으로 표현하면 되고 이것을 ` `(백틱) 안에 넣어야 한다는 것이다.
'JavaScript' 카테고리의 다른 글
| Loading Username (0) | 2022.02.24 |
|---|---|
| Saving Username (0) | 2022.02.23 |
| 4.3 Events part Two (0) | 2022.02.22 |
| 4.2 Events (0) | 2022.02.21 |
| Form Submission (0) | 2022.02.15 |
