#4.4 Getting Username

카테고리 없음

#4.4 Getting Username

김예나 2023. 2. 8. 16:09

string과 변수를 합치는 방법
두번째 방법은 ``(백틱)기호로 묶어주고 변수를 ${}로 묶어줘야 함

greeting.innerText = "Hello " + username;
    //greeting.innerText = `Hello ${username}`; 똑같음 string과 변수를 하나로 합쳐줌

로그인 버튼을 누르면 로그인폼을 제거하고 사용자이름과 함께 hello메시지 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Hello from HTML!</title>
</head>
<body>
    <form class="login-form" >
        <input 
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?" />
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1> <!--이게 추가 된 것-->
<script src="app.js"></script>
</body>
</html>

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(); //새로고침되는 기본 동작을 막음
    loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기
    const username = loginInput.value; //입력받은 값을 username에 저장
    greeting.innerText = `Hello ${username}`; //greeting(h1) 클래스리스트에 HELLO uaername이라는 텍스트 추가
    greeting.classList.remove(HIDDEN_CLASSNAME); //greeting(h1) 클래스리스트에 원래 존재하던 hidden클래스 제거해서 보이기
}


loginForm.addEventListener("submit",onLoginSubmit);

.hidden {
    display: none;
}