for in for of 강의에서 starter() 함수가 starter is not defined
0
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>아무리 호출하고 수정해도 계속 오류가 납니다 이유 좀 알려주세요 ㅠ
react
node.js
seo
graphql
next.js
Answer 3
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
41
1
댓글 기능 구현 중 질문드립니다.
0
68
1
쿠폰코드 발급
0
147
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
89
2
문의드립니다!! ㅠㅠ
0
107
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
80
2
_app.js 작성 이후로 에러가 발생하네요
0
96
2
학습자료
0
72
2
학습자료가 안열립니다.
0
51
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
111
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
101
2
const, let 사용 질문 드립니다.
0
72
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
124
2
회원가입 과제 피드백 부탁드립니다.
0
81
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
167
2
서버 502 error
0
248
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3