로그인2 (getting username)

 

 

0

 

 

목표: 1. 아이디 입력 후 자연스레 login-form 사라지게 하기

        2. 동시에 h1태그에 "hello"+ id 나오게하기

 

 

방법: css로 숨겨주기

.hidden{
    display:none;
}

html

 
<form id="login-form">
    <input required max-length="15" type="text" placeholder="what is your name?">
    <button>log In</button>
   
<h1 id="greeting" class="hidden"></h1>  

<form을 submit하고 난 후, function에서 일어난 일>

 

7. 일단 submit의 기본동작을 저지

8. 내가 넣은 입력값을 콘솔에서 동시에 확인

9. 입력값을 넣는동시에 loginForm에서 "hidden" class가 추가되어 사라지게됨

10. loginFom이 사라지면서 greeting 에서는 "hidden" class가 제거되고

11. html에는 hello 입력값이 뜨게된다.

 

반복되는 코드가 있어 좀 더 깔끔히 코드를 정리하자면,

const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
 
 
 
 
function onClickLogin(event){
    event.preventDefault();
    const username = loginInput.value;
    console.log(username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `hello ${username}`;
 
    
}
 
 
 
loginForm.addEventListener("submit", onClickLogin);