0

If hope this is not duplication to another question, I try to create website and use countdown timer to specific end date like countdown for wedding invitation website.

Here wedding.js

function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - 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, endtime){
  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(endtime);

    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 = 'February 12 2017 00:00:50 UTC+0700';
initializeClock('clockdiv', deadline);

and code to call countdown

<div id="clockdiv">
<span class="days"></span> Day 
<span class="hours"></span> Hour 
<span class="minutes"></span> Minute 
<span class="seconds"></span> Second 
</div>

Work fine if use external js call wedding.js , but i need to include some php code so i try to convert it to inline javascript like this

<!DOCTYPE html>
<html>

<head>
    <title>Title</title>

    <script>
function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - 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, endtime){
  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(endtime);

    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 = 'February 12 2017 00:00:50 UTC+0700';
initializeClock('clockdiv', deadline);
    </script>

</head>

<body>
<div class="wrapper">
    <div class="container">
        <div class="blocks">

                <!-- start countdown -->
                <div class="fic">
                    <div id="clockdiv">
                        <span class="days"></span> Day<br/>
                        <span class="hours"></span> Hour<br/>
                        <span class="minutes"></span><br/>
                        <span class="seconds"></span> 
                    </div>
                </div>
                <!-- end countdown -->

            </div>
        </div>
    </div>
</div>
</body>
</html>

but html show nothing, need help to fix this inline javascript code

Yayun
  • 11
  • 5
  • Just add your js code inside `` tags and echo using php – Web Dev Guy Feb 06 '17 at 11:02
  • i try to use `` but html not show anything, what wrong? – Yayun Feb 06 '17 at 11:16
  • check the console in developer tools. Check if there is any error message – Afif Zafri Feb 06 '17 at 11:22
  • Hi @AfifZafri here error message in console `TypeError: clock is null initializeClock ` – Yayun Feb 06 '17 at 12:04
  • Could you give the full codes for the page? It's weird because I try copy and paste your code and it's working fine. I even test to add the PHP code, and it's working fine. I suspect there is other script, blocking your clock script – Afif Zafri Feb 06 '17 at 12:44
  • this problem solved, just write javascript after html (put in footer website) and not it work – Yayun Feb 08 '17 at 03:19

0 Answers0