this is my first thread so i am not sure i write in the right section etc, but i've got a quite simple problem which forced me to write here for help. I've made some code to create countdown which shows how many time left till the particular date. Yet something is not working. I'll add my html and JS code and if someone could find a flaw, i'd appreciate it.
function countdown() {
var now = new Date();
var eventDate = new Date(2020, 10, 10);
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime - currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
var d = Math.floor(h / 24);
h %= 24;
m %= 60;
s %= 60;
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
s = (s < 10) ? "0" + s : s;
document.getElementById("days").textContent = d;
document.getElementById("days").innerText = d;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
setTimeout(countdown, 1000);
}
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/laikmatis.css">
<link rel="stylesheet" href="./css/main.css">
<title>Puslapis</title>
</head>
<body>
<section>
<main>
<h1 class="text1">rgrgrgrgrg</h1>
<h2 class="text2">rrgrfgrfgvrfgvrfgv</h2>
<span class="text1">dvbgtbrtfbrfb</span>
<table>
<div id="laikmatis">
<tr>
<td id="days">120</td>
<td id="hours">20</td>
<td id="minutes">20</td>
<td id="seconds">20</td>
</tr>
<tr>
<td>Days</td>
<td>Hours</td>
<td>Minutes</td>
<td>Seconds</td>
</tr>
</div>
</table>
<script src="./JS/laikmatis.js"></script>
<p class="text2">efefefefeeeeeeeeeeeeeeeeefefefe e fef efe fefefef ef ef efe fef ef ef efe ef ef ef ef </p>
</main>
</section>
</body>
</html>
</pre>
You forgot to call the function
countdown();
function countdown() {
var now = new Date();
var eventDate = new Date(2020, 10, 10);
var currentTime = now.getTime();
var eventTime = eventDate.getTime();
var remTime = eventTime - currentTime;
var s = Math.floor(remTime / 1000);
var m = Math.floor(s / 60);
var h = Math.floor(m / 60);
var d = Math.floor(h / 24);
h %= 24;
m %= 60;
s %= 60;
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
s = (s < 10) ? "0" + s : s;
document.getElementById("days").textContent = d;
document.getElementById("days").innerText = d;
document.getElementById("hours").textContent = h;
document.getElementById("minutes").textContent = m;
document.getElementById("seconds").textContent = s;
setTimeout(countdown, 1000);
}
countdown();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./css/laikmatis.css">
<link rel="stylesheet" href="./css/main.css">
<title>Puslapis</title>
</head>
<body>
<section>
<main>
<h1 class="text1">rgrgrgrgrg</h1>
<h2 class="text2">rrgrfgrfgvrfgvrfgv</h2>
<span class="text1">dvbgtbrtfbrfb</span>
<table>
<div id="laikmatis">
<tr>
<td id="days">120</td>
<td id="hours">20</td>
<td id="minutes">20</td>
<td id="seconds">20</td>
</tr>
<tr>
<td>Days</td>
<td>Hours</td>
<td>Minutes</td>
<td>Seconds</td>
</tr>
</div>
</table>
<script src="./JS/laikmatis.js"></script>
<p class="text2">efefefefeeeeeeeeeeeeeeeeefefefe e fef efe fefefef ef ef efe fef ef ef efe ef ef ef ef </p>
</main>
</section>
</body>
</html>