시작은 프리캠프 final 과제 질문
안녕하세요 과제 중 해결되지 않는 문제가 있어 문의 드립니다.
인증 확인 버튼을 누를 때
'인증이 완료되었습니다' 안내창 띄우기
안내창 확인을 누르면, 인증 확인 버튼 텍스트 인증 완료로 변경
인증 확인 버튼 비활성화
가입하기 버튼 활성화
과정을 하고 있습니다.
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 이 키워드로 해결책을 검색하며 찾아봤는데요, 혹시 더 적절한 검색 키워드가 있다면 그것도 추천 부탁합니다. 검색도 기술인 것 같은데 요령이 없네요.
Answer 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 부분이 최초 한 번만 실행되도록 수정하는 방법 등이 있겠네요!^^
81강 실습 자료 없음
0
6
1
선생님 공유해주신 핸드북에 링크가 몇개 잘못되었어요
0
16
2
62강 실습자료가 잘못되었습니다.
0
17
1
코드 자료는 없는걸까요?
0
31
3
강의 목표
0
33
1
강의 노트 위주로 학습
0
35
1
쿠키 생성 관련
0
64
3
JWT auth error invalid token
0
59
2
경력기술서는 어떤 방향이 좋을까요?
0
52
2
MSA 와 BFF 아키텍처 설명 부분에 대한 문의
0
51
1
eslint.config.js 설정 질문입니다.
0
63
2
7강 흐름 제어 아키택쳐 코드 순서
1
53
1
수업자료 어디서 찾아볼 수 있나요?
0
47
2
함수 강의의 정답.. 어떤가요?
0
40
1
깃권한요청드립니다
0
39
1
<div id="banner">배너 이미지</div> 관련 질문
0
34
1
강의자료
0
41
1
윈도우에서 Node js를 설치하고 싶어요
0
37
0
addToFile function에서 path를 사용해 새로운 파일을 생성
0
46
1
섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의
0
470
1
Javascript Exercise Problem List 문
0
386
1
투두리스트 배경화면 적용 404 오류
0
645
1
점 표기법과 []표기법에 대해
1
539
1
섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료
0
614
1

