훈훈한 자바스크립트 반복문파트 스크립트 태그의 위치 질문

저는 버튼을 누르면 텍스트 출력은 오류, 콘솔 출력은 null이 뜹니다 원인이 뭐죠?

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>D-Day-count</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js"></script>
  </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-meassage"></div>
    <div id="target-selector id">
      <input id="target-year-input" class="target-input" size="5" /> -
      <input id="target-month-input" class="target-input" size="5" /> -
      <input id="target-date-input" class="target-input" size="5" />
    </div>
    <button onclick="counterMaker()" id="start-btn">카운트다운 시작</button>
  </body>
</html>

script.js

// const obj = {
//   name: "Jason",
//   age: 25,
// };
// if (obj.name === "Jason" || obj.age === 25) {
//   console.log("안녕, " + obj.name + ", 너의 나이는 " + obj.age);
// } else {
//   console.log("넌 우리 멤버가 아니다.");
// }

const dateFormMaker = 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;
};

const counterMaker = function () {
  const messageContainer = document.querySelector("#d-day-message");
  console.log(messageContainer);
  messageContainer.textContent = "D-Day를 입력해주세요.";
  const targetDateInput = dateFormMaker();
  const nowDate = new Date();
  const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0);
  const remaining = (targetDate - nowDate) / 1000;
  // 만약, remaining === 0 라면, 타이머가 종료되었습니다. 출력
  if (remaining <= 0) {
    console.log("타이머가 종료되었습니다.");
  } else if (isNaN(remaining)) {
    //만약, 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다. 출력
    console.log("유효한 시간대가 아닙니다.");
  }

  const remainingDate = Math.floor(remaining / 3600 / 24); //몇일 남았는지 구하기
  const remainingHours = Math.floor(remaining / 3600) % 24; //몇 시간 남았는지 구하기
  const remainingMin = Math.floor(remaining / 60) % 60; //몇 분 남았는지 구하기
  const remainingSec = Math.floor(remaining) % 60; //몇 초 남았는지 구하기

  console.log(remainingDate, remainingHours, remainingMin, remainingSec);
};

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