[JS] momentum 만들기 1

uxolrv·2022년 9월 27일

📌 HTML 요소 JS로 가져오기

    <div id="login-form">
        <input 
            type="text"
            placeholder="What is your name?"
        />
        <button>Log In</button>
    </div>

🔎 input과 button 가져오기 1

input과 button을 감싸고 있는 div를 먼저 불러와 변수에 할당한 후,
해당 변수에 querySelector를 사용하여 접근한다.

// querySelector를 사용할 경우, class, id, tagname 모두 검색이 가능하므로 대상을 명확히 작성해야 한다.
const loginForm = document.getElementById("login-form")

// document가 아닌 loginForm 안에서 바로 찾을 수 있다.
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("tutton");

🔎 input과 button 가져오기 2

document.querySelector를 사용해
#login-form의 input과 button으로 바로 접근한다.



const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");

📌 input에 빈 값이나 너무 긴 값 입력 막기

🔎 addEventListener로 click 이벤트 달아주기

<body>
    <div id="login-form">
        <input 
            type="text"
            placeholder="What is your name?"
        />
        <button>Log In</button>
    </div>
    <script src="app.js"></script>
</body>

function onLoginBtnClick() {
    const username = loginInput.value;

    if (username === "") {
        alert("Please write your name.")
    } else if (username.length > 15) {
        alert("Your name is too long.")
    }

}

loginButton.addEventListener("click", onLoginBtnClick);

❗️ 그러나 HTML에 해당 기능이 있다면 이미 가지고 있는 기능을 사용하는 것이 가장 좋다!

🔎 form 태그로 input 감싸서 속성 달아주기

    <form id="login-form">
        <input 
            required
            maxlength="15"
            type="text"
            placeholder="What is your name?"
        />
        <button>Log In</button>
    </form>