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

뒤에까지 다 수강 완료하여 타이머는 완성된상태인데, 기준시간을 추가하고싶어서 다시 이 강의로 돌아와서 질문남겼습니다ㅠㅠ

    <div class="reference_date">
      <span>기준일자</span>
      <div class="flex" id="reference_date">
        <span id="reference_years"></span>
        <span id="reference_month"></span>
        <span id="reference_day"></span>
      </div>
    </div>

기준일자도 추가하고자 하여 id값 d-day_message를 가진 html태그 뒤에 위 코드를 추가해 넣어놓았습니다.

    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}`;
      return dateFormat;
    };

현재 js에 이렇게 적혀있고, console.log(dateFormMaker()); 하면 제가 인풋에 입력한 값이 나오는 것 까지는 알겠는데, 이 값을 화면에 나타내어야할지 모르겠다는 질문이였습니다!

innerHTML 을 사용하면 될것같았는데 변수명.innerHTML = ______; 여기에 오는걸 어떻게써야할지 몰라서요!

이 방법으로 해야하는게 아니라면 어떻게해야하는지 궁금합니다

input으로 입력 받은 날짜를 화면에 표시하고자 하시는거라면, 우선 "reference_date"라는 id 값을 가진 태그를 JS 파일에서 참조해야 할 것 같습니다!

document.querySelector를 사용하면 되겠죠?

이후에는 "reference_date" 태그를 dateFormMaker 함수 내부에서 불러와 해당 태그 내부의 데이터를 변경해 주면 될 것 같습니다.

여러 방법이 있을 텐데, 작성해 주신 것처럼 "reference_date" 태그 내에 있는 span 태그들 안쪽에 값을 출력하고 싶으시다면, 우리가 불러온 태그가 가진 children이라는 속성을 살펴보시면 될 것 같습니다! 이후에는 각 children의 textContent 속성을 수정해주면 화면에 원하는 데이터를 출력해줄 수 있을거예요!

만약 span 태그로 정해진 영역이 반드시 필요한 것이 아니라면 타이머가 종료 되었을 때, 잘못된 시간이 입력 되었을 때 메세지를 보여주기 위해 우리가 사용했던 innerHTML을 활용할 수도 있겠죠?

감사합니다 답변주신 내용 보고 차근차근히 다시 해보았습니다 원하는결과는 나왔습니다!