Submit button displays an image based on the time of the day

Basically there is an empty box with a submit button directly undern开发者_StackOverflow中文版eath. The empty box might have a default picture loaded to begin with. When a user clicks the submit button, how can I display a different picture (in place of the default) based on a certain time of the day. I don't really need an answer regarding the checkTime logic, but I would appreciate some help with regards to the submit button being able to change a picture in the same spot. Thanks guys.

if you just have a simple button, you can add an onclick event to it:

Example 1:

<input type="button" onclick="changeImage()" />

and your changeImage() function will have the logic to follow

Example 2:

<input type="button" id="submitButton" value="Button"/>

Javascript -

document.getElementById("submitButton").onclick = function () {
   // run the logic
}

images can be switched using the src property

javascript -

document.getElementById("theImage").src = "newImage.jpg";

Since you are talking about a "Submit" button I assume it is within a form. Is submitting the form supposed to have some other effect? If not, use type="button" rather than type="submit". Either way, here is some basic code to get you started:

<img id="thePicture" src="...">
<input type="submit" value="Go" onclick="return changePicture();">

<script>
function changePicture() {
  // your logic here to set which picture to use
  var newPicture = "yourpath/images/img1.jpg";

  document.getElementById("thePicture").src = newPicture;

  // return false to stop the form submitting, otherwise
  return true;
}
</script>