개요
포트폴리오에 생일까지 며칠남았는지 표현하고 싶어서 자바스크립트를 오랜만에 찾아보게 되었습니다.
본론
그리 큰 파일도 아니고, js파일을 따로 많이 사용할 것도 아니라서 이렇게 script 태그를 사용해서 생일 Dday를 출력하려고 했습니다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>생일 출력하기</title>
<script>
var now = new Date();
var Dday = new Date(now.getFullYear(), 11, 22);
var gap = Dday - now;
var result = Math.floor(gap/ (1000 * 60 * 60 * 24));
let birthdayText = '1999.11.22 (올해 생일까지 '+ {result}+'일 전)';
document.getElementById("BD") = birthdayText;
</script>
</head>
<body>
<h3>생년월일</h3>
<p id="BD">1999.11.22</p><br>
</body>
</html>javascript로 값을 넣을 때에는 document.getElementById("id명")을 사용해서 넣는다는 게 일단 생각나서 처음엔 위와 같이 코드를 작성하였습니다.
그런데 에러가 떡하니 뜨고 값이 변하지 않길래 서치를 했더니 innerHTML을 넣어줘야 반영이 된다는 결과가 나왔습니다. 그래서 document.getElementById("BD") = birthdayText; 대신 document.getElementById("BD").innerHTML = birthdayText; 을 했더니?
또다시 에러 등장...
그러다 발견한 stackoverflow를 발견하게되었습니다...!
>>> stackoverflow.com/questions/2632137/why-is-document-getelementbyid-returning-null
Why is document.GetElementById returning null
I've been using document.GetElementById() successfully but from some time on I can't make it work again. look at the following Code:
스택오버 플로우 글 중에서 해당 방법을 사용했습니다.
마무리
이를 반영해서 입력했더니 다음과 같이 완성이 되었습니다!
- 코드
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>생일 출력하기</title>
<script>
var now = new Date();
var Dday = new Date(now.getFullYear(), 11, 22);
var gap = Dday - now;
var result = Math.floor(gap/ (1000 * 60 * 60 * 24));
window.onload = function() {
document.getElementById("BD").innerHTML = `<p>1999.11.22 (올해 생일까지 ${result} 일 전)</p>`;
}
</script>
</head>
<body>
<h3>생년월일</h3>
<p id="BD">1999.11.22</p><br>
</body>
</html>- 실행결과
'Language > Javascript' 카테고리의 다른 글
| [react] timepicker 관련 라이브러리 + 찾아보다 알게된 컴포넌트 공유 사이트 (0) | 2022.05.01 |
|---|---|
| [styled-component] react-slick 사용하기 (how to use react-slick) (0) | 2022.04.13 |
| [styled Component] Styled Component로 custom dropdown 만들기 (0) | 2022.04.11 |
| [자바스크립트] String을 number로 바꾸는 법 (0) | 2021.09.26 |