Countdown timer

JavaScript
1

I have a web page with an image on it and what im trying to do is have the image change after five seconds. I want to be ables to see the counter, and provide a stop tomer button to stop it iff I want, lastly I am trying to give the image an onClick event so that the image changes when its clicked.
Heres tghe page

<!DOCTYPE html>
<html>
<head>
  <title>change picture</title>
  <script type = "text/javascript">
var image = document.getElementById("image_to_flip");
   var images = [];
   images[0] = "images/two.gif";
   images[1] = "images/three.gif";
     function displayNextImage() {
          document.getElementById("img").src = images[0];
      }

      function startTimer() {
          setInterval(displayNextImage, 5000);
      }
  </script>
</head>
<body onload = "startTimer()">
<script>
var timerVar = setInterval(countTimer,1000);
var totalSeconds = 0;
function countTimer() {
++totalSeconds;
var seconds = totalSeconds;

document.getElementById("timer").innerHTML = "Seconds:"+seconds;
}
function flipImage() {
image.src = "images/one.gif";
}
</script>
   <img id="img" src="images/one.gif" id="image_to_flip" onClick="flipImage()"/>
   
   <div id="timer"></div>
<a href="#" id ="stop_timer" onclick="clearInterval(timerVar)">Stop time</div>
</body>
</html>`

The page works fine, but gives the error,

(index):33 Uncaught TypeError: Cannot set property ‘src’ of null

whern I click on the image.
There has to be a better way to do this, i think my code is not very efficient, can you show me the correct way?

2

That line is this, it’s saying image is null;

image.src = "images/one.gif";

You’re trying to set it here in the <head> before the document has loaded.

var image = document.getElementById("image_to_flip");

We really need an FAQ for this, it trips up people every day.
All scripts need to be at the end of the body.

1 Like
3

After come cleaning up of the code, by moving scripts to the bottom, and shifting scripting calls out of the HTML to the bottom of the scripts section, other sins were found and fixed too, such as having multiple id attributes on the one element!

Here is the simplified HTML

<!DOCTYPE html>
<html>
<head>
  <title>change picture</title>
</head>
<body>
   <img id="image_to_flip" src="images/one.gif">
   
   <div id="timer"></div>
    <a href="#" id ="stop_timer">Stop time</div>
    <script src="timedimage.js"></script>
</body>
</html>

And here is the reworked script, where the end of the script attaches element events to appropriate parts of the script, and a click on the image bringing us back to the first image.

function displayNextImage() {
    imageIndex = (imageIndex + 1) % images.length;
    image.src = images[imageIndex];
}
function flipImage() {
    imageIndex = images.length - 1;
    displayNextImage();
}
function startTimer() {
    setInterval(displayNextImage, 5000);
}
function countTimer() {
    totalSeconds += 1;
    document.getElementById("timer").innerHTML = "Seconds:" + totalSeconds;
}

var image = document.getElementById("image_to_flip");
var images = [
    "images/one.gif",
    "images/two.gif",
    "images/three.gif"
];
var imageIndex = 0;
var totalSeconds = 0;
var timerVar = setInterval(countTimer, 1000);

startTimer();
document.getElementById("image_to_flip").onclick = flipImage;
document.getElementById("stop_timer").onclick = function () {
    clearInterval(timerVar);
};

It is now easier to modify the above code to achieve what you desire.

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.