[JS] CSS(display: none)를 이용하여 HTML 요소 숨기기

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(4.4 Getting Username)

---

이번에는 User가 이름을 제출하면 form을 없애보자.

이걸 구현하기 위한 방법들이 있다.

1. HTML 요소 자체를 없애기  2. CSS를 이용하여 숨기기

2번 방법을 이용해서 없애보자.

 

.hidden {
    display: none;
}

CSS파일에 hidden이라는 classname을 만들어준다.

display: none을 준다. 이게 끝.

이제 어떤 요소에게 이 clssnames을 주면 그 요소는 숨겨진다.

 

    <form id="login-form" class="hidden">
        <input 
        required
        maxlength="15"
        type="text" placeholder="What is your name?"
        />
        <button>Log In</button>
    </form>

html의 form에 class="hidden"을 추가했더니 요소들이 사라져 흰 화면만 표시되는 것을 볼 수 있다.

 

하지만 우리는 User가 이름을 제출한 뒤 사라지는 것을 원하기 때문에 그에 맞게 코드를 작성해보자.

일단 HTML에 추가했던 class="hidden"은 지워준다.

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");

function onLoginSunmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");
    console.log(username);
} 

loginForm.addEventListener("submit", onLoginSunmit);

User가 form을 통해 이름을 제출했을 때 기본 동작은 막아주고 User의 이름은  const username = loginInput.value 로 저장한다.

classList.add로 css class "hidden"를 추가해주고 console.log(username)으로 확인까지 해보자.

 

User의 이름을 입력하면 form은 사라졌지만 입력값은 console에 기록되는 것을 확인할 수 있다.

 

HTML 파일에 <h1 class="hidden"></h1>  를 추가한 후 작동시키면 <h1>은 존재하지만 숨겨져 있는 것을 알 수 있다.

 

 

그럼 이제 JS에서 기본 동작은 실행되지 않도록 막아주고, hidden이라는 classname을 더해줘서 form을 숨기고,

user의 이름을 변수로 저장해주고, 그 이름을 h1안에 넣어줘보자.

 

 

먼저  <h1 id="greeting" class="hidden">  h1태그에 "greeting"이라는 id를 추가해준다.

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting"); //추가

function onLoginSunmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");
    greeting.innerText = "Hello" + username; //추가
} 

loginForm.addEventListener("submit", onLoginSunmit);

그리고 JS에서 id를 찾아주어 greeting 변수에 담아준 후 h1 안에다 greeting에 있는 텍스트를 추가한다.

 

작동하면 user의 이름을 입력하면 form은 숨겨지고 h1 안에는 "Helloddubi"가 들어간다.

잘 작동하지만 h1에서 hidden class를 빼줘야 한다.

 

function onLoginSunmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");   //classname 중복
    greeting.innerText = "Hello " + username;
    greeting.classList.remove("hidden"); //classname 중복
}

JS에서 classList.remove("hidden")을 추가하여 없애줄수있다.

하지만 classname "hidden"이 중복되니 먼저 변수를 추가해주도록 하자.

 

const HIDDEN_CLASSNAME = "hidden";

function onLoginSunmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const HIDDEN_CLASSNAME = "hidden";

여기서 HIDDEN_CLASSNAME을 대문자로 쓰는 이유는 관습 때문이라고 한다.

일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용한다.

(또 loginForm, loginInput처럼 중요한 정보를 담은게 아니라 대문자로 작성함.)

 

이제 user의 이름 입력 후에 form은 사라지고 h1이 뜨는 것과 h1의 class가 있었다가 없어지는 것을 확인해 볼 수 있다. 

 

 

기능은 잘 작동한다!

이건 추가적으로 알려주신 부분👇

"Hello " + username의 string이랑 변수를 합치는 부분을 다른 방법으로 작성할수도 있다.

greeting.innerText ="Hello "+ username;          → 기존 코드 

greeting.innerText =`Hello ${username}`;       → 수정 코드 

수정된 코드는

`백틱`을 사용하고 ${변수명} 것이 규칙

이다. ( ' ' ,  " " 아님 주의 )

 

물론 방법은 두가지이고 취향의 차이지만 니꼬쌤은 수정된 코드를 사용한다고 하시니 나도 그렇게 쓸꺼다 핳