getElementById에서 받은 값 사용법

HTML, CSS, JavaScript

getElementById에서 받은 값 사용법

JJJaewon 2021. 9. 13. 22:49

<!DOCTYPE html>
<html>

<head>
    <title>로그인</title>
</head>

<body>
    <form>
        <label>아이디</label>
        <br>
        <input type="text" id="id">
        <br>
        <label>비밀번호</label>
        <br>
        <input type="password" id="password">
        <br>
        <br>
        <input type="submit" id="loginSubmit">
    </form>

    <script src="./loginScript.js"></script>
</body>

</html>

loginScript.js

var id = document.getElementById('id');
var password = document.getElementById('password');
var submit = document.getElementById('loginSubmit');

const realId = 'abc';
const realPassword = '123';

submit.onclick = function() {
    if (id.value !== realId || password.value !== realPassword) {
        alert("사용자 정보가 맞지 않습니다.");
    } else {
        alert(realId + '님 반갑습니다.');
    }
}

getElementById()는 () 안의 id를 가진 객체를 반환한다. 따라서 그 값을 사용하기 위해서는 password !== realPassword 같이 바로 사용할 수 없고 password.value와 같이 써야 한다.