반응형
문제상황
내 문제상황이 조금 별나서
문제상황에 대한 배경에 대해 간략히 언급하고 넘어가려고 한다.
위의 이미지에서
아이디란에 'samuel'을 입력하고
비밀번호란에 'wjsansrk'를 입력한 뒤
LOGIN 버튼을 눌렀을 때
portfoilo.html로 넘어갔으면 했었다.
그래서
<div id="white_box"></div>
<div id="wrap">
<form class="login_form">
<h1 id="login_title"> Log in </h1>
<P> <input class="id" name="id" type="text" placeholder="ID"></P>
<P><input id="password" name="ps" type="password" placeholder="PASSWORD"></P>
<button id="btn">LOGIN</button>
</form>
</div>
<script>
document.querySelector("#btn").addEventListener("click", () => {
const id = "samuel";
const password = "wjsansrk";
if(id == document.querySelector(".id").value) {
if(password == document.querySelector("#password").value)
{
/////////////////////////////////////////////
location.href = "portfolio.html";
////////////////////////////////////////////
alert(`${id}님 반갑습니다.`)
}
else {
alert("비밀번호가 맞지 않습니다.");
}
}
else {
alert("아이디 혹은 비밀번호가 맞지 않습니다.");
}
});
</script>
이렇게 입력했고(css는 위에 나와있지 않았으며, 슬래시를 넣어준 건 해당 부분이 눈에 잘 보이게 하기 위해서이다.)
여기서 중요한 건
location.href = "portfolio.html"; 이다.
이렇게 입력하면 portfolio.html로 넘어가야 하는데
넘어가질 않았다. 해결방법은 무척 간단했다.
문제해결 방법
button 부분에 type이 생략된 탓에 이런 문제가 발생하고 있던 거였다.
type을 생략하면 버튼 타입은 "submit"로 지정된다.
그래서 LOGIN을 클릭했을 때 location.href가 실행되기도 전에
페이지가 submit 된 것이라고 한다. 그래서 button type을 button으로 해줬다.
button type = "button"
이런 식으로 말이다.
수정된 코드는 아래와 같다.
<body>
<div id="white_box"></div>
<div id="wrap">
<form class="login_form">
<h1 id="login_title"> Log in </h1>
<P> <input class="id" name="id" type="text" placeholder="ID"></P>
<P><input id="password" name="ps" type="password" placeholder="PASSWORD"></P>
///////////////////////////////////////////////////////////
<button id="btn" type="button">LOGIN</button>
/////////////////////////////////////////////////////////////
</form>
</div>
<script>
document.querySelector("#btn").addEventListener("click", () => {
const id = "samuel";
const password = "wjsansrk";
if(id == document.querySelector(".id").value) {
if(password == document.querySelector("#password").value)
{
location.href = "portfolio.html";
alert(`${id}님 반갑습니다.`)
}
else {
alert("비밀번호가 맞지 않습니다.");
}
}
else {
alert("아이디 혹은 비밀번호가 맞지 않습니다.");
}
});
</script>
</body>
</html>반응형
'IT > JavaScript' 카테고리의 다른 글
| [JS] 자바스크립트 '화살표 함수' 정의와 사용법 (0) | 2023.01.26 |
|---|---|
| [JS] 자바스크립트 '함수 선언문'과 '함수 표현식' 차이 (0) | 2023.01.22 |
| [JS] 자바스크립트 문자를 숫자로, 숫자를 문자로 바꾸는 방법 (0) | 2023.01.21 |
| [JS] 자바스크립트 '함수'는 뭐고, 어떻게 사용하는 걸까? (0) | 2023.01.16 |
| [JS-ERROR] 자바스크립트에서 name을 변수로 선언하니 밑줄이 그어진다. (0) | 2022.05.23 |