Timer.js

⚠️여러 번 누르면 여러 개의 interval이 만들어 clearInterval이 실행되어 interval을 지워도 마지막 interval만 제거되고 기존에 형성되어 있던 interval은 제거되지 않아 계속해서 시계가 돌아감.

nowTimeInputElement('#nowTime');

// JSDoc 쓰는 방법
/**
 * selector로 선택한 요소의 textContent에 현재시간 삽입
 * @param {string} selector 
 */
function nowTimeInputElement(selector) {
  const element = document.querySelector(selector);
  element.textContent = generateNowTimeFormat();
}
// selector: 사용할 수 있는 범위 늘어남

// ``으로 묶어두면 하이라이트 들어감
/**
 * 현재 시간을 `오전 hh:MM:SS`형식으로 반환
 * @returns {string}
 */
function generateNowTimeFormat () {
  const now = new Date();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  let seconds = now.getSeconds();

  let ampm = '';
  if(hours < 12) {
    ampm = `오전`;
  } else {
    ampm = `오후`;
    hours -= 12;
  }

  return `${ampm} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

let intervalNowTime =  setInterval(() => {
  nowTimeInputElement('#nowTime')
}, 1000);

// 멈춰!! 버튼 처리
const btnStop = document.querySelector('#btnStop');
btnStop.addEventListener('click', () => {
  clearInterval(intervalNowTime);
  intervalNowTime = null // 오류 제거 방법
});

// 재시작 버튼 처리
const btnRestart = document.querySelector('#btnRestart');
btnRestart.addEventListener('click', () => {
  nowTimeInputElement('#nowTime');
  
  if(intervalNowTime === null) { // 오류 제거 방법
    intervalNowTime = setInterval(() => {
      nowTimeInputElement('#nowTime');
    }, 1000);
  }
});