JS 내 페이지 이동
button을 이용해 다른 페이지로 이동시키고 싶을 때 Javascript 내에서 사용할 수 있는 코드가 있다.
=> location.href = "이동할 페이지";
input value 값 가져오기
함수 내에서 input 태그의 value 값을 가져오려면 함수 내에서 따로 지정해주어야 한다.
만약 함수 밖에서 지정해주게 되면 빈 칸을 value 값으로 인식하게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<h2>로그인 화면</h2>
<input type="text" id="uid" placeholder="id를 입력하세요.">
<input type="password" id="upw" placeholder="pw를 입력하세요.">
<button onclick="login()">로그인</button>
</body>
<script>
const uid = document.getElementById("uid");
const upw = document.getElementById("upw");
let vid = "asdf";
let vpw = "1234";
function login() {
let u_id = uid.value;
let u_pw = upw.value;
if ((u_id == vid) && (u_pw == vpw)) {
location.href= "condition.html";
} else if (u_id == "" || u_pw == "") {
alert("id와 password를 입력해주세요.");
} else if ((u_id != vid) && (u_pw != vpw)) {
alert("id와 password 모두 틀렸습니다.");
} else if (u_id != vid) {
alert("id가 틀렸습니다.");
} else if (u_pw != vpw) {
alert("password가 틀렸습니다.");
}
}
</script>
</html>위 코드는 로그인을 했을 때 id와 password의 값이 일치하는지 확인하고 맞을 경우 condition.html로 이동, 틀렸을 경우 각각의 alert창이 뜨게 한다.
이렇게 비교를 하기 위해서 함수 밖에서 미리 선언해준 vid값과 vpw값이 input 태그에서 직접 입력한 값을 저장한 변수인 uid값과 upw값과 일치하는지 확인해주어야 한다.
그러나 함수 밖에서 uid와 upw의 값을 가져오게 되면 빈 칸을 value값으로 인식해 비교한다. 따라서 위 코드와 같이 함수 안에 "let u_id = uid.value;"와 "let u_pw = upw.value"를 작성해준 것이다.
이렇게 함수 안에 선언해준 u_id와 u_pw 변수를 이용해 if문으로 비교해줌으로써 결과를 도출해낸다.
'Js' 카테고리의 다른 글
| 13. 다양한 for문 (0) | 2022.09.02 |
|---|---|
| 12. 배열 메소드 (0) | 2022.09.02 |
| 10. 배열 (0) | 2022.08.23 |
| 9. 다양한 함수/메소드 (0) | 2022.08.22 |
| 8. 이벤트(event) (0) | 2022.08.20 |
