바닐라 JS) 12. 입력받은 값 가져오기

Sep 02, 2024

1. hidden

숨기기

style.css


.hidden{
    display: none;
}

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 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);

See more posts

바닐라 JS) 12. 입력받은 값 가져오기

1. hidden

2. 값을 입력받은 이후 설정

More articles

바닐라 JS) 14. 시계 만들기

바닐라 JS) 13. local Storage에 저장하기

바닐라 JS) 11. 값 입력받기

바닐라 JS) 10. CSS