Home/ Questions/Q 6123037
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:58:07+00:00

When I try to run the code below the browser does not display an

  • 0

When I try to run the code below the browser does not display an image, instead it displays: [object HTMLImageElement].

I want to create a clock that shows a different picture for every minute (thing for the wife). I started by making a function that finds the date from the browser’s clock, turns it into string value which will be the file name. The function is called when the webpage loads and the function is updated every second. There is a tag with a tag id call, where the final result should be displayed.

All my pictures are stored in a file called images
The photos are numbered from 0000.jpg to 2359.jpg (to match the time of day)

I can not figure out what I am doing wrong. I tried my best to comment each line of the code so maybe that will help out in any answers.

<html>
<head>
<script language="javascript" type="text/javascript">

//function to get and update the picture file based on the user's clock
function updatePicture ()
{

//variable for getting the date on the user's clock
var clockTime = new Date ();

//variables for showing just the hours and minutes
var hours = clockTime.getHours();
var minutes = clockTime.getMinutes();

//add leading zeros to hours and minutes under 10
hours = ( hours < 10 ? "0" : "" ) + hours;
minutes = ( minutes < 10 ? "0" : "" ) + minutes;

//turn hours and minutes into string values
var hoursString = hours.toString();
var minutesString = minutes.toString();

//variable puts hours and minutes strings together to make a picture file name
var timeToPictureFile = hoursString + minutesString;

//variable to make a new image object
var pictureFile = new Image;

//adding <img> tag and.jpg with timeToPictureFile to make the file name and url call
pictureFile.src = '<img src="images/' + timeToPictureFile + '.jpg"/>';

//update the time display
document.getElementById('picture').firstChild.nodeValue = pictureFile;
}
</script>
</head>

<!-- load the picture and update the picture every second -->
<body onLoad="updatePicture(); setInterval('updatePicture()',1000)">

<!-- a div to hold the picture -->
<div>
<span id="picture">&nbsp;</span>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My suggestion

    <html>
<head>
<script language="javascript" type="text/javascript">
//function to get and update the picture file based on the user's clock
var oldImage = "";
function updatePicture () {
  //variable for getting the date on the user's clock
  var clockTime = new Date();
  //variables for showing just the hours and minutes
  var hours = clockTime.getHours();
  var minutes = clockTime.getMinutes();
  //add leading zeros to hours and minutes under 10
  hours = ( hours < 10 ? "0" : "" ) + hours;
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  //variable puts hours and minutes strings together to make a picture file name
  var timeToPictureFile = ""+hours + minutes +'.jpg';

  if (oldImage === timeToPictureFile) return; // no need to do this yet
  oldImage = timeToPictureFile; // save     
  //variable to make a new image object
  var pictureFile = new Image();
  pictureFile.src = timeToPictureFile; // preload the image;
  //update the time display - 
  // this could also be done changing an existing image's src attribute
  document.getElementById('picture').innerHTML = '<img src="'+pictureFile.src+'" />';
}

window.onload=function() {
  updatePicture(); 
  setInterval(updatePicture,1000); // check every second
}  
</script>
</head>


<body>
<div>
<span id="picture">&nbsp;</span>
</div>

</body>
</html>

    OR

    <html>
<head>
<script language="javascript" type="text/javascript">
//function to get and update the picture file based on the user's clock
function updatePicture () {
  //variable for getting the date on the user's clock
  var clockTime = new Date();
  //variables for showing just the hours and minutes
  var hours = clockTime.getHours();
  var minutes = clockTime.getMinutes();
  //add leading zeros to hours and minutes under 10
  hours = ( hours < 10 ? "0" : "" ) + hours;
  minutes = ( minutes < 10 ? "0" : "" ) + minutes;
  //variable puts hours and minutes strings together to make a picture file name
  var timeToPictureFile = ""+hours + minutes +'.jpg';
  //update the time display
  document.getElementById('picture').innerHTML = '<img src="'+timeToPictureFile+'" />';
}

window.onload=function() {
  updatePicture(); 
  setInterval(updatePicture,60000); // check every minute
}  
</script>
</head>


<body>
<div>
<span id="picture">&nbsp;</span>
</div>

</body>
</html>
    • 0