for in for of 강의에서 starter() 함수가 sta... - 인프런



const messageContainer = document.querySelector("#d-day-message");
const container = document.querySelector("#d-day-container");

container.style.display = 'none'
messageContainer.innerHTML = "<h3>D-Day를 입력해 주세요</h3>";

const dateForMaker = function () {
  const inputYear = document.querySelector("#target-year-input").value;
  const inputMonth = document.querySelector("#target-month-input").value;
  const inputDate = document.querySelector("#target-date-input").value;

  //const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate;
  const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
  return dateFormat;

  // console.log(inputYear, inputDate, inputMonth);
};
const counterMaker = function () {
  const targetDateInput = dateForMaker();
  // console.log(targetDateInput);
  const nowDate = new Date();
  const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
  const remaining = (targetDate - nowDate) / 1000;
  // 만약  remaining이 0이라면 , 타이머가 종료 되었습니다 출력 (수도코드)
  console.log(remaining);

  if (remaining === 0 || remaining < 0) {
    // console.log("타이머가 종료되었습니다");
    messageContainer.innerHTML = "<h3>타이머가 종료되었습니다</h3>";
  } else if (isNaN(remaining)) {
    // 만약 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다 출력
    // console.log("유효한 시간대가 아닙니다");
    messageContainer.innerHTML = "<h3>유효한 시간대가 아닙니다</h3>";
  }

  //   const remainingDate = Math.floor(remaining / 3600 / 24); //Math. floor 소숫점 제거
  //   const remaingHours = Math.floor(remaining / 3600) % 24;
  //   const remaingMin = Math.floor(remaining / 60) % 60;
  //   const remaingSec = Math.floor(remaining) % 60;

  const remaingObj = {
    remainingDate: Math.floor(remaining / 3600 / 24),
    remaingHours: Math.floor(remaining / 3600) % 24,
    remaingMin: Math.floor(remaining / 60) % 60,
    remaingSec: Math.floor(remaining) % 60,
  };

  //   const days = document.getElementById("days");
  //   const hours = document.getElementById("hours");
  //   const min = document.getElementById("min");
  //   const sec = document.getElementById("sec");

  // const documentObj = {
  //   days: document.getElementById("days"),
  //   hours: document.getElementById("hours"),
  //   min: document.getElementById("min"),
  //   sec: document.getElementById("sec"),
  // };

  const documentArr = ['days', 'hours', 'min' , 'sec']
  // const docKeys = Object.keys(documentObj);
  const timeKeys = Object.keys(remaingObj); // Object.keys : 객체의 키를 가져와 배열로 반환f

  let i = 0;  
  for (let tag of documentArr) { // 배열로 이용한다
   document.getElementById(tag).textContent = remaingObj[timeKeys[i]]
   i++
    
  }

  const starter = function () {
    container.style.display ='flex'
    messageContainer.style.display = 'none'
    counterMaker()
  }



  // for (let i = 0; i < timeKeys.length; i = i + 1) { for문
  //   documentObj[docKeys[i]].textContent = remaingObj[timeKeys[i]];

  //   // console.log(timeKeys);
  //   // console.log(timeKeys[i]);
  // }
  
  // let i = 0;

  // for (let key in documentObj) { // 객체로 이용한다 for in
  //   documentObj[key].textContent = remaingObj[timeKeys [i]]
  //   i++;
  // }

  // documentObj['days'].textContent = remaingObj["remainingDate"];
  // documentObj['hours'].textContent = remaingObj["remaingHours"];
  // documentObj['min'].textContent = remaingObj["remaingMin"];
  // documentObj['sec'].textContent = remaingObj["remaingSec"];

  //   console.log("클릭");

  //   console.log(remainingDate, remaingHours, remaingMin, remaingSec);
};

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <!-- <script src="./script.js" defer></script> -->
    <title>Document</title>
  </head>
  <body>
    <h1>D-Day</h1>
    <div id="d-day-container">
      <div class="d-day-child-container">
        <span id="days">0</span>
        <span>일</span>
      </div>
      <div class="d-day-child-container">
        <span id="hours">0</span>
        <span>시간</span>
      </div>
      <div class="d-day-child-container">
        <span id="min">0</span>
        <span>분</span>
      </div>
      <div class="d-day-child-container">
        <span id="sec">0</span>
        <span>초</span>
      </div>
    </div>
    <div id="d-day-message"></div>
    <div id="target-selector">
      <input type="text" id="target-year-input" class="target-input" / size="5">
      <input type="text" id="target-month-input" class="target-input" /
      size="5"> <input type="text" id="target-date-input" class="target-input" /
      size="5">
    </div>
    <button onclick="starter()" id="start-btn">카운트 다운 시작</button>
    <script src="./script.js"></script>
  </body>
</html>

아무리 호출하고 수정해도 계속 오류가 납니다 이유 좀 알려주세요 ㅠ

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

for in for of 강의에서 starter() 함수가 starter is not defined