LokisCoyote LokisCoyote - 7 months ago 27
HTML Question

Javascript works in chrome, but not other browsers

I have a countdown clock for an assignment. I asked my professor for help, but she was not able to help me. It works fine in Chrome, but in all other browsers is breaks and does not display the time.

here is the HTML, Javascript and CSS. It works here when I run the code, but it not working on Firefox, IE and etc.



function getTimeRemaining(deadline) {
var t = Date.parse(deadline) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, deadline) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
var t = getTimeRemaining("2016-5-6 19:30:00 GMT+06:00");

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock();
var timeinterval = setInterval(updateClock, 1000);
}

var deadline = '2016-5-6 19:30:00 GMT+06:00';
initializeClock('clockdiv', deadline);

body{
text-align: center;
background: white;
font-family: sans-serif;
font-weight: 100;
}

h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}

#clockdiv{
font-family: sans-serif;
color: black;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}

#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: rgb(209,0,0);
display: inline-block;
}

#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: white;
display: inline-block;
}

.smalltext{
padding-top: 5px;
font-size: 16px;
}

<!DOCTYPE html>
<html>
<head>


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Elly Belly Style</title>
<link href="npg_ebs.css" rel="stylesheet" type="text/css" />
<link href = "npg_clock.css" rel= "stylesheet" type="text/css"/>

</head>

<body>

<div id= "container">


<h2>Countdown to the next Auction</h2>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</section> <!-- end main column -->


</section>

</div>

<footer>
<ul>
<li><a href="index.htm" title="Homepage">Elly Belly Style</a></li>
<!-- <li><a href="http://ellybelly.bigcartel.com/" title="Ready To Ship">Ready To Ship</a></li> commented out for project-->
<li><a href="npg_rts.htm" title="Ready To Ship">Ready to Ship</a></li>
<!-- <li><a href="https://www.facebook.com/groups/ebsupcycles/" title="Elly Wars Auctions">Elly Wars Auctions</a></li> commented out for project-->
<li><a href="npg_ellywars.htm" title="Elly Wars Auctions">Elly Wars</a></li>
<li><a href="npg_pictures.htm" title="Completed Designs">Completed Designs</a></li>
<li><a href="npg_about.htm" title="About Us">About Us</a></li>
<li><a href="npg_custom.htm" title="Custom Order Inquiry">Custom Order Inquiry</a></li>
<li><a href="npg_links.htm" title="Links">Links</a></li>
<li><a href="npg_design.htm" title="Design Document">Design Document</a></li>
<li><a href="npg_table.htm" title="Business Hours">Business Hours</a></li>
<li><a href="npg_sitemap.htm" title="Sitemap">Sitemap</a></li>
<li><img src="npg_mail.png" alt="email"/>Email:
<script language="JavaScript"> <!--
document.write ('<A HREF="mai')
document.write ('lto:ellybellybows')
document.write ('&#64;')
document.write ('gmail.com">ellybellybows')
document.write ('&#64;')
document.write ('gmail.com</A>')
// email link hidden-->
</script>
</li>
</ul>

</footer>

<script>
//script for dropdown button
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

<script src="npg_clock.js"></script>
</body>
</html>




Answer

the issue is the incorrect formatting of Date string, follow the ISO 8601 format, use: 2016-05-06T19:30:00+06:00.

fiddle demo of the fixed code.