const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function btnClick() {
const username = loginInput.value;
if (username === "") {
alert("Please write your name");
} else if (username.length > 15) {
alert("Your name if too long.");
}
}
loginButton.addEventListener("click", btnClick);
하지만 이미 html에서 form 기능 구현이 가능하다.
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<button>Log In</button>
</form>
html에서 form을 구현하기 위해서 input이 form 안에 들어가 있어야 한다.
html에서 값을 입력하면 새로고침 되면서 값이 사라져버림
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function submitForm() {
const username = loginInput.value;
console.log(username);
}
loginForm.addEventListener("submit", submitForm);
// // 브라우저 자체 기능을 사용할 수도 있다.
값이 사라지지 않도록 중간에 print문을 찍어주었지만, 새로고침 되면서 값이 사라져버림
-> 해결방법?
바로 사라지지 않도록 동작을 멈춘다.
우리는 addEventListener에 function을 설정하고(왜냐하면 event 설정에 있어서 함수를 실행시키는 것이 아니라 event가 발생했을 때 함수를 실행시켜주기 때문이다.) 이때 function의 실행은 브라우저에 의해서 실행된다. 때문에 새로고침 하기전에 브라우저 동작을 멈추게 하면 된다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function submitForm(event) {
event.preventDefault();
console.log(loginInput.value);
}
loginForm.addEventListener("submit", submitForm);
form의 기본 동작은 submit이다.
addEventListener에 두번째 인수로 들어가는 함수의 첫번째 인수는 암묵적으로 event의 정보가 담긴 객체가 입력된다.
이때 그 이벤트의 동작을 멈추면, 브라우저의 기본 동작을 멈추게 된다.
브라우저의 기본 동작이 멈추게 되면서 입력 정보 값을 얻을 수 있다.
로그인 입력이 일어나면 다음으로 로그인 form이 없어져야 한다.
첫번째 방법은 classList.add를 사용하여 hidden class를 생성하여 display = none으로 설정하는 방법이다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const link = document.querySelector("a");
function submitForm(tomato) {
tomato.preventDefault();
console.log(tomato);
const username = loginInput.value;
loginForm.classList.add("hidden");
console.log(username);
}
loginForm.addEventListener("submit", submitForm);
hidden으로 숨겨진 값을 다시 가져오는 방법은 hidden을 적용한 h1의 태그를 가져오고, ClassList를 활용하여 hiddend을 remove해주어 저장된 값을 다시 나타나게 해준다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const link = document.querySelector("a");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function submitForm(tomato) {
tomato.preventDefault();
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", submitForm);
function submitForm(tomato) {
tomato.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem("username", username);
// greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
// show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", submitForm);
} else {
// show the greetings
greeting.innerText = `Hello ${savedUsername}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
function submitForm(tomato) {
tomato.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
// greeting.innerText = "Hello " + username;
paintGreetings(username);
}
function handleLinkClick(event) {
event.preventDefault();
console.dir(event);
}
// loginForm.addEventListener("submit", submitForm);
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
// show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", submitForm);
} else {
// show the greetings
paintGreetings(savedUsername);
}