0428

sinsin·2022년 4월 28일
0

01

타이머가 0초가 되어도 멈추지 않고 -1, -2초까지 넘어가버리는 문제


  function setTimer() {
    let handleTimer = setInterval(() => {let timeInNumber = Number(lastTime.innerText);if (timeInNumber === 0) {
        clearInterval(handleTimer);
        showResult();
      } else {
        timeInNumber -= 1;
        lastTime.innerText = timeInNumber;}
    }, 1000);
  }

① setInterval을 변수에 담으면 clearInterval(변수명)으로 중단시킬 수 있음.
② 임의로 넣어둔 초(string)를 timer로 사용할 수 있도록 숫자로 변환하여 변수에 담아둠.
③ 1초가 줄어들 때마다 1씩 뺀 숫자를 다시 화면에 출력. (자동으로 string 타입으로 변환됨)



02

score에 0을 넣어둔 상태에서 바로 연산을 하니 01, 02, 03 이런 식으로 숫자에 0이 붙어 출력되는 문제


  function addScore() {
    if (sentence.innerText === typeInput.value) {
      let scoreNumber = Number(score.innerText); ①
      scoreNumber += 1; 
      score.innerText = parseInt(scoreNumber);}
    typeInput.value = "";
  }

① 점수데이터가 string이고 임의로 담아둔 데이터도 string이므로, 점수를 숫자로 바꾸어 변수에 담아둠.
② 연산이 완료된 숫자데이터를 다시 string으로 바꾸어 점수데이터에 재할당.



03

start 버튼에 click, keyup 이벤트를 모두 주고 싶은데, start 버튼은 input 요소가 아니어서 keyup 이벤트를 곧바로 감지하지 못하는 문제.

  
  startBtn.addEventListener("click", start);
  document.addEventListener("keyup", (e) => {if (e.keyCode === 13) { ②
      startBtn.click();}
  });

① document에 keyup 이벤트리스너를 걸어주기
② 누른 키의 코드가 enter의 코드인 13번일 때만 내부 코드가 실행되도록 함.
③ start 버튼을 클릭했을 때의 이벤트를 실행시킴.



04

input에 직접 focus 효과 주기

 input.focus();

0개의 댓글