CODEWITHSUNDEEP
javascripthtmlwebclockclearinterval
user1121477
user1121477

Reputation: 33

Issue with my clearInterval function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--

function init()
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock()
{
  var currentTime = new Date ();

  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();

  // Adds zeros if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Decides whether AM or PM
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Creates the display string
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  // Updates the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>
<link rel="stylesheet" type="text/css" href="week9live.css" />
</head>

<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<h1>A live clock in Javascript</h1>
<div>
  <p>The time according to your pc is </p> <span id="clock">&nbsp;</span>
</div>
</br>
<button type ="button" onclick = "clearInterval('updateClock()')">Stop Clock</button>
<button type="button" onclick="setInterval('updateClock()', 1000)">Start Clock</button>
</body>
</html>

I have this lot of HTML which I've used to generate a live clock. I've then been tasked to create two buttons, one which stops the clock, and then a second that restarts it. My setInterval function works fine, but I cannot for the life of me work out why the clearInterval function isn't working. Any ideas?

Cheers

Upvotes: 0

Views: 747

Answers (3)

Adam Rackis
Adam Rackis

Reputation: 83366

You need to save the value that's returned from setInterval, and pass that into your call to clearInterval.

var idForClear = setInterval(updateClock, 1000);

and then

clearInterval(idForClear);

This will be a lot easier if you ditch the inline dom level 0 handlers and do something like this

<button id="stopBtn" type ="button">Stop Clock</button>
<button id="startBtn" type="button">Start Clock</button>

var idForClear;
document.getElementById("startBtn").onclick = function() {
    idForClear = setInterval(updateClock, 1000);
};
document.getElementById("stopBtn").onclick = function() {
    clearInterval(idForClear);
};

Just make sure you place this script at the bottom of your page's body, to make sure document.getElementById doesn't get called before you dom is ready.

Also, it's usually considered evil to call setTimeout or setInterval with a string. When you're not in an inline handler, instead of this

setInterval('updateClock()', 1000);

You'd want to pass in a function

setInterval(function() { updateClock(); }, 1000);

But of course updateClock is a function, too, so the above is a more noisy equivalent to

setInterval(updateClock, 1000);

Upvotes: 3

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

Pass id of setInterval in clearInterval See: ClearInterval

Upvotes: 0

cambraca
cambraca

Reputation: 27827

The clearInterval function should receive an id that is generated by setInterval. Something like:

var theid = setInterval('updateClock()', 1000);
clearInterval(theid);

Upvotes: 0

Related Questions