const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
//string만으로 이루어진 변수명을 지을 때 대문자로 짓는게 관습이다.
그리고 중요한 변수가 아니라서!
function onLoginSubmit(event) {
event.preventDefault();
//여기서는 form의 기본동작 submit를 막아준다. submit을 하면 페이지가 새로고침 되기때문이다.
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
// greeting.innerText = "Hello " + username;
greeting.innerText = Hello + ${username};
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
"Hello " + username; 과
Hello + ${username};은 같다.
이왕이면 후자의 방법을 사용하자.
classList.add : 클래스를 추가해준다.
classList.remove : 클래스를 제거해준다.
