ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • getElementById에서 받은 값 사용법
    HTML, CSS, JavaScript 2021. 9. 13. 22:49
    반응형

    login.html

    <!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와 같이 써야 한다.

    반응형

    'HTML, CSS, JavaScript' 카테고리의 다른 글

    javascript 함수 선언식, 함수 표현식  (0) 2021.11.14
    자바스크립트로 댓글 수정 만들기  (0) 2021.11.13
    rest api 활용하기  (0) 2021.11.05
    ajax, url 파싱  (0) 2021.09.24
Designed by Tistory.