-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
회원가입 폼 기능 추가
23.03.06 23:41 작성 조회수 619
0
안녕하세요 이제 마지막 파이널 과제를 하고 있고, 기능 추가를 위하여 고민하는데 어떻게 event 값을 반환해야 할 지 감이 안 와서 여쭤봅니다.
제가 추가하고자 하는 기능의 흐름은
// 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다.
이 과정을 통하고 싶어서 2개의 비밀번호 칸에 각각 함수를 생성하여 비밀번호 값을 받아오게 한 뒤에 sendNum 함수에서 2개의 비밀번호 값을 비교하여 동일한 경우에만 인증번호 전송을 가능하게 하고 싶습니다. 그리고 다른 경우에는 alert를 이용하여 비밀번호를 확인하라는 창을 띄우려고 하는데, 비밀번호 값을 얻어내는 함수 pw1 값 꺼내서 어떻게 sendNum 함수에 넣어야 할 지 잘 모르겠습니다... ㅠㅠ 코드 올리겠습니다. 감사합니당..!
<!DOCTYPE html>
<html lang="ko">
<head>
<title>코드캠프 회원가입</title>
<link rel="stylesheet" href="./signup.css" />
<script src="./signup.js" defer></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="wrapper__header">코드캠프 회원가입</div>
<div class="wrapper__body">
<div class="body__info">
<input type="email" placeholder="이메일을 입력해 주세요." />
<input type="text" placeholder="이름을 입력해 주세요." />
<input
type="password"
placeholder="비밀번호를 입력해 주세요."
id="pw1"
onchange="changeValue(event)"
/>
<input
type="password"
placeholder="비밀번호를 다시 입력해 주세요."
id="pw2"
/>
<div class="phone">
<input
type="text"
class="phone__first"
maxlength="3"
id="p1"
oninput="moveCursorFirst()"
/>
-
<input
type="text"
class="phone__mid"
maxlength="4"
id="p2"
oninput="moveCursorSec()"
/>
-
<input type="text" class="phone__last" maxlength="4" id="p3" />
</div>
</div>
<div class="body__certificate">
<div class="certificate__send">
<div class="certificate__num" id="certificate__num">000000</div>
<button class="send__num" onclick="sendNum()" id="send__num">
인증번호 전송
</button>
</div>
<div class="certificate__complete">
<div class="remaining">
<span id="remaining__min">3</span>:
<span id="remaining__sec">00</span>
</div>
<button class="complete__btn" id="complete__btn" disabled>
인증 완료
</button>
</div>
</div>
<div class="body__addition">
<select name="region">
<!-- selected + disabled 같이 이용하면 된다. -->
<option value="" selected disabled>지역을 선택하세요.</option>
<option value="gg">경기도</option>
<option value="seoul">서울</option>
<option value="ic">인천</option>
</select>
<div class="sex">
<div class="women">
<input type="radio" id="women" name="sex" />
<label for="women">여성</label>
</div>
<div class="men">
<input type="radio" id="men" name="sex" />
<label for="men">남성</label>
</div>
</div>
</div>
</div>
<div class="divideLine"></div>
<div class="wrapper__footer">
<button class="submit">가입하기</button>
</div>
</div>
</div>
</body>
</html>
// 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기.
// 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기.
// 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다.
// 4. 3분이 지나면 인증 완료 버튼이 비활성화된다.
// 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기.
const moveCursorFirst = () => {
const p1 = document.getElementById("p1");
if (p1.value.length === 3) {
document.getElementById("p2").focus();
}
};
const moveCursorSec = () => {
const p2 = document.getElementById("p2");
if (p2.value.length === 4) {
document.getElementById("p3").focus();
}
};
// 아직 해결하지 못 함. 비밀번호 가지고 나와야 된다.
const changeValue = (event) => {
let pw1 = event.target.value;
return pw1;
};
// 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기.
let isStarted = false;
const sendNum = () => {
// 2. 타이머 실행시키기.
let time = 5;
let isDisabled = document.getElementById("complete__btn");
if (isStarted === false) {
isStarted = true;
isDisabled.removeAttribute("disabled"); // 비활성화 끄기.
// 1. 6자리 수의 인증 번호 생성하고 화면에 보여주기.
let certificateNum = document.getElementById("certificate__num");
let number = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
certificateNum.innerText = number;
let timer = setInterval(function () {
// 타이머가 실행되는 경우
if (time >= 0) {
const remainingMin = Math.floor(time / 60);
const remainingSec = String(time % 60).padStart(2, "0");
// console.log(`${remainingMin}분 ${remainingSec}초`);
const min = document.getElementById("remaining__min");
const sec = document.getElementById("remaining__sec");
min.innerText = remainingMin;
sec.innerText = remainingSec;
time = time - 1;
} else {
// console.log("타이머가 종료되었습니다.");
// 타이머를 종료시키는 경우
isDisabled.setAttribute("disabled", ""); // 비활성화 켜기.
clearInterval(timer);
isStarted = false;
}
}, 1000);
} else {
}
};
답변을 작성해보세요.
1
코드캠프 프론트엔드 멘토
2023.03.07
안녕하세요!
비밀 번호를 가지고 오는 부분은 document.getElementById("id").value를 이용해보시고, 비밀번호 확인을 입력할때 가져온 value가 입력된 event.target.value(비밀번호 확인)과 일치되는지 확인 하면 될 것 같습니다.
나머지 로직은 pw1과 pw2의 값을 가지고 와 일치할 때 비활성화를 풀어주시면 됩니다.
if문에 && 연산자로 조건을 추가해주시면 됩니다.
코드로 자세히 알려드리지 않는 이유는 저희 커리큘럼에서 발생한 에러가 아닌 추가적인 부분이기때문에 자세한 코드 설명은 제공되지 않습니다.
감사합니다.😁
답변 1