inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

시작은 프리캠프 final 과제 질문

해결된 질문

440

zero.1.0.one.xx

작성한 질문수 7

0

안녕하세요 과제 중 해결되지 않는 문제가 있어 문의 드립니다.

 

인증 확인 버튼을 누를 때

과정을 하고 있습니다.

const timer__button = () => {
    alert("인증이 완료되었습니다.")
    document.getElementById("timer__button").innerText = "인증 완료"
    document.getElementById("timer__button").disabled = true
    document.getElementById("submit").disabled = false
}

인증 확인 버튼을 누르면,

'인증이 완료되었습니다.' 안내창이 뜨고, 인증 확인에서 인증 완료로 텍스트가 변경됩니다.

하지만 버튼의 활성화와 비활성화가 되지 않습니다.

 

타이머가 작동되고 있는 동안 타이머가 활성화되도록 한 코드 때문에 씹히는 걸까요? 혹시 몰라 타이머 부분 코드도 첨부합니다.

const randomNumber__button = () => {

    document.getElementById("randomNumber__button").disabled = true

    let randomNumber = String(Math.floor( Math.random() * 1000000 )).padStart(6,"0")
    document.getElementById("randomNumber__number").innerText = randomNumber

    let time = 7
    let timer = true
    timer = setInterval(function(){
        if(time >= 0){
            let min = Math.floor(time/60)
            let sec = String(time%60).padStart(2,"0")
            document.getElementById("timer__number").innerText = min + ":" + sec
            time = time - 1

            document.getElementById("timer__button").disabled = false
        } else {
            document.getElementById("timer__button").disabled = true
            document.getElementById("randomNumber__number").innerText = "000000"
            document.getElementById("timer__number").innerText = "3:00"

            clearInterval(timer)
        }
    },1000)
}

 혹시 이 코드에 영향을 받아 버튼 비활성화가 안 되는 거라면 타이머 숫자를 3:00(기본 세팅 값)으로 바꾸면 될까 했지만 역시 안 됐습니다.

const timer__button = () => {
    document.getElementById("timer__button").innerText = "인증 완료"
    alert("인증이 완료되었습니다.")
    document.getElementById("timer__number").innerText = "3:00"
    // document.getElementById("timer__button").disabled = true
    // document.getElementById("submit").disabled = false
}

 

 

여기저기 찾아본 결과 alert 기능은 안내창이 떠 있는 동안 동작을 일시정지 시키고, alert 다음으로 이어지는 동작을 적어줄 땐 첨부 코드와 같이 단순 나열로 가능하다고 합니다. 다른 코드들 찾아봤을 때도 제가 쓴 코드와 유사했고요.

 

어느 부분이 문제인 건지, 만약 앞서 작성한 타이머 코드 때문에 씹히는 거라면 어떻게 해결해야 좋을지 힌트를 좀 받고 싶습니다.

alert button disabled 이 키워드로 해결책을 검색하며 찾아봤는데요, 혹시 더 적절한 검색 키워드가 있다면 그것도 추천 부탁합니다. 검색도 기술인 것 같은데 요령이 없네요.

javascript

답변 1

1

노원두

안녕하세요! zero.1.0.one.xx님!

올려주신 코드를 보니, setInterval 부분이 아래와 같이 작성되어 있네요!

       if(time >= 0){
            let min = Math.floor(time/60)
            let sec = String(time%60).padStart(2,"0")
            document.getElementById("timer__number").innerText = min + ":" + sec
            time = time - 1

            document.getElementById("timer__button").disabled = false
        } else {
            document.getElementById("timer__button").disabled = true
            document.getElementById("randomNumber__number").innerText = "000000"
            document.getElementById("timer__number").innerText = "3:00"

            clearInterval(timer)
        }

 

이 중에서, 타이머가 아직 끝나지 않은 경우에 1초에 1번씩 계속 실행되는 코드는 아랫부분 일거구요!

       if(time >= 0){
            let min = Math.floor(time/60)
            let sec = String(time%60).padStart(2,"0")
            document.getElementById("timer__number").innerText = min + ":" + sec
            time = time - 1

            document.getElementById("timer__button").disabled = false
       } else {
            // ...
       }

 

다시말해, if문 안의 마지막줄 document.getElementById("timer__button").disabled = false 이 코드가 1초에 1번씩 실행되기 때문에, disabled = true로 비활성화 시켰다고 하더라도 다시 풀려나게 돼요!

문제를 해결하기 위해서는 1. 인증 완료시 timer가 더이상 작동하지 않도록 만들거나, 2. 위 코드에서 disabled = false 부분이 최초 한 번만 실행되도록 수정하는 방법 등이 있겠네요!^^

1

zero.1.0.one.xx

감사합니다.

10월 15일 삭제예정 강의 문의

0

32

1

강의제목에 10/15일 삭제라고 나와있는데,

0

46

1

스크립트 영상 미일치

0

73

3

감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.

0

54

2

강의 설명 중에 헷갈리는 것이 있네요

0

49

1

수업자료 관련 문의

0

65

3

1강 동영상 재생 오류

1

66

2

Composition단계에서 `Layer`는 누가 만드는지

0

42

1

Strict Mode 예시 질문!

0

58

2

수업이 안보여요

0

62

1

저자 블로그에 있는 강의는 어떤 강의인가요?

1

62

1

[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.

1

86

5

4강 카드뉴스 자동화 자료가 안보입니다!!

0

106

2

윈도우즈 환경에서 진행중입니다.

0

63

2

4강 카드뉴스 자동화 자료

6

124

1

라이브 강의 영상 녹화본이 있을까요?

0

100

1

인증이 늦었습니다ㅜㅜ 확인부탁드립니다

0

89

1

스웨거 접속이 안되는데 확인 부탁드립니다.

0

63

1

설명이 잘못된거같습니다.

1

77

2

섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의

0

502

1

Javascript Exercise Problem List 문

0

410

1

투두리스트 배경화면 적용 404 오류

0

679

1

점 표기법과 []표기법에 대해

1

588

1

섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료

0

639

1