회원가입 폼 기능 추가

안녕하세요 이제 마지막 파이널 과제를 하고 있고, 기능 추가를 위하여 고민하는데 어떻게 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 {
  }
};

인프런 커뮤니티 질문&답변