-
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