사용자가 username을 입력하고 클릭을 누르면 form 자체가 없어지도록 만들고 싶다.
이걸 구현하기 위한 두 가지 방법이 있다.
1. HTML 요소 자체 없애기. -> 이건 뭔가 단점이 많을 것 같은 느낌이 든다..
2. CSS로 없애기(없어진 것처럼 보이게 하기)
<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" />
<title>Momentum</title>
</head>
<body>
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<input type="submit" value="Log in" />
</form>
<script src="app.js"></script>
</body>
</html>
<css>
.hidden {
display: none;
}
<javascript>
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
function onLoginSubmit(event) {
event.preventDefault(); //새로고침 막기
const username = loginInput.value;
loginForm.classList.add('hidden');
console.log(username);
}
loginForm.addEventListener('submit', onLoginSubmit);
input 창에 username을 입력하고 Log in 버튼을 누르면 오른쪽 사진과 같이 form이 사라진다!
h1 태그를 만들고 이걸 hidden으로 해놓자.
그런 다음 form이 없어짐과 동시에 h1은 화면에 나타나도록 만들어보자.
username을 화면에 표시하자
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting');
const HIDDEN_CLASSNAME = 'hidden';
function onLoginSubmit(event) {
event.preventDefault(); //새로고침 막기
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
greeting.innerText = 'Hello ' + username + '!';
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener('submit', onLoginSubmit);onLoginSubmit 함수를 수정하고, hidden 클래스를 여러 번 사용하기 때문에 이걸 변수로 만들어주자.
변수 이름이 HIDDEN_CLASSNAME로 대문자인 이유는 관습 같은 것이다.
string만 포함된 변수는 대문자로 표시한다.
string을 합치는 방법으로
greeting.innerText = 'Hello ' + username + '!';
대신 다른 방법을 사용할 수 있다.
greeting.innerText = `Hello ${username}!`;
`는 키보드에서 ~ 밑에 위치하는 문자이다.
'html + css + javascript' 카테고리의 다른 글
| [바닐라 JS로 크롬 앱 만들기] Loading Username (0) | 2023.06.27 |
|---|---|
| [바닐라 JS로 크롬 앱 만들기] Saving Username (0) | 2023.06.26 |
| [바닐라 JS로 크롬 앱 만들기] link, preventDefault (0) | 2023.06.24 |
| [바닐라 JS로 크롬 앱 만들기] Input Values, forms (0) | 2023.06.24 |
| [바닐라 JS로 크롬 앱 만들기] CSS in Javascript (0) | 2023.06.21 |