Final signup 과제에서

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ 이벤트 변경 감지

해결된 질문

작성

336

수정됨

let phone1 = document.getElementById('phone1').value;

function ph1() {
  if (phone1.length === 3) {
    document.getElementById('phone2').focus();
  }
}

function ph1() {
  let phone1 = document.getElementById('phone1').value;
  if (phone1.length === 3) {
    document.getElementById('phone2').focus();
  }
}

안녕하세요.

섹션1 final 과제 sign up 진행 중입니다.

핸드폰 번호를 입력하면 포커스를 이동 중에

첫번째 코드블럭 같이 정의한 후 포커스를 이동하려 했더니 되지 않더라고요!

혹시 위의 두 코드 블럭은 다른 코드로 정의되는 것인가요 ?

저는 {} 밖에서 정의를 해 주면 전체 코드에 적용된다고 해서 한번에 phone1,phone2,phone3 을 정의하려고 했거든요!

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! 민갱님!

자바스크립트파일이 실행될 때, 변수, 콘솔 등의 기능이 위에서부터 한 줄씩 자동으로 실행됩니다!
반면에, 함수는 실행 명령이 들어왔을 때 실행된답니다!

따라서, 위 2개의 코드는 다르며, 위 코드 1번에서 ph1() 이라는 함수가 실행될 때마다 아래의 코드는 다시 실행되지 않아요!

let phone1 = document.getElementById('phone1').value;

반면에, 코드가 함수 안에 들어가있는 ph2()의 경우에는, 해당 함수가 실행될 때마다 함수 안에 포함되어 있으므로 매 번 다시 실행된답니다^^

민갱

질문자

추가적으로 ,핸드폰 번호 세번째 칸에서 4 자리 입력 시 '인증 번호 전송' 버튼을 활성화 하는 작업 중입니다.

자바스크립트로 돔 조작 중에
disabled = 'false' 로 바꿔 주는 작업은 왜 버튼 활성화가 안 될까요 ?

function ph3() {
  let phone3 = document.getElementById('phone3').value;
  if (phone3.length === 4) {
    document.getElementById('sendBtn').disabled = 'false';
    document.getElementById('sendBtn').removeAttribute('disabled'); // 이 코드 줄만 실행 됩니다.
  }
}

html

<div class="confirm">
            <div>0:00</div>
            <button class="send-btn" disabled="true">인증 완료</button>
          </div>
          <div>

노원두

지식공유자

안녕하세요! 민갱님!

아래의 코드는 모두 버튼을 비활성화 하는 코드입니다.

    <button disabled>인증완료</button>
    <button disabled="true">인증완료</button>
    <button disabled="false">인증완료</button>
    <button disabled="사과">인증완료</button>
    <button disabled="바나나">인증완료</button>
    <button disabled="아무거나">인증완료</button>

따라서, "false"라는 문자열이 들어가있다고 활성화 상태로 변경되는 것이 아니며,
disabled라는 속성은 존재 자체가 비활성을 의미하므로, disabled라는 속성 자체를 제거해 주셔야 합니다!

다음을 시도해 보세요!^^

document.getElementById("qqq").removeAttribute("disabled");

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

Final signup 과제에서