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?
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!
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.