1. hidden
- 숨기기
- style.css
.hidden{ display: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login-form hidden" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <a href="https://www.naver.com">Go to Naver</a> <script src="app.js"></script> </body> </html>
2. 값을 입력받은 이후 설정
- input 태그는 사라짐
const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); // input 태그 가져오기 function onLoginSubmit(event) { // 자리만 만들어주면 됨 event.preventDefault(); const username = loginInput.value; // 유저가 입력한 값 가져오기 loginForm.classList.add("hidden"); // 폼 숨기기 console.log(username); // 콘솔에 유저네임 출력 } loginForm.addEventListener("submit",onLoginSubmit);
- input 태그는 사라지고 h1은 표시
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login-form" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <h1 class="hidden"></h1> <script src="app.js"></script> </body> </html>
- input 태그는 사라지고 h1에 입력받은 값을 표함하여 지정된 텍스트 설정
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login-form" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <h1 id="greeting" class="hidden"></h1> <script src="app.js"></script> </body> </html>
- app.js
const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const freeting =- document.querySelector("#greeting"); function onLoginSubmit(event) { // 자리만 만들어주면 됨 event.preventDefault(); loginForm.classList.add("hidden"); // 폼 숨기기 const username = loginInput.value; // 유저가 입력한 값 가져오기 greeting.innerText = "Hello " + username; } loginForm.addEventListener("submit",onLoginSubmit);
- input 태그는 사라지고 h1에 입력받은 값을 표함하여 지정된 텍스트 표시
const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const freeting =- document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; function onLoginSubmit(event) { event.preventDefault(); // 새로고침 방지 loginForm.classList.add(HIDDEN_CLASSNAME); // 폼 숨기기 const username = loginInput.value; // loginInput에 값을 변수에 저장하기 greeting.innerText = `Hello ${username}`; //저장된 값을 변수 값에 넣기 greeting.classList.remove(HIDDEN_CLASSNAME); // hidden 클래스명 없애기 } loginForm.addEventListener("submit",onLoginSubmit);
Share article
