Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

move the document.write line within the html code

Posted on 2009-04-22
4
Medium Priority
?
229 Views
Last Modified: 2012-08-14
I have a javascript code that works to display the time at the top of the page.  However, I can't seem to figure out how to move it to display exactly where I want it on the page.  Can you tell me what I need to do to have the clock display further down in the page ?  Is there a way to move the "document.write..." line further down ?
var currentTime = new Date()
  var hours = currentTime.getHours()
  var minutes = currentTime.getMinutes()
 
  var suffix = "AM";
  if (hours >= 12) {
  suffix = "PM";
  hours = hours - 12;
  }
  if (hours == 0) {
  hours = 12;
  }
  if (minutes < 10)
  minutes = "0" + minutes
  document.write("<b>As Of " + hours + ":" + minutes + " " + suffix + "</b>")

Open in new window

0
Comment
Question by:drelinger
  • 3
4 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24204928
The document.write() only works when the script is executed as part of the HTML body.

If you want to have something (e.g., text), displayed on a specific part of the page, you could use a function to display the text as part of a <span>, or <div>

For example:

- create a span like:

<span id='myTime'></span>

- and add this code in the <head> portion of your document
<script type='text/javascript'>
  function showtime( id ) {
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
 
    var suffix = "AM";
    if ( hours >= 12 ) {
      suffix = "PM";
      hours = hours - 12;
    }
    if (hours == 0) {
      hours = 12;
    }
    if (minutes < 10) {
      minutes = "0" + minutes
    }
    var place = document.getElementById( id )
    if ( place ) {
      place.innerHTML = "<b>As Of " + hours + ":" + minutes + " " + suffix + "</b>"
    } else {
      alert( 'showtime() : specified element not found. id="' + id + '"' )
    }
  }
  window.onload = function() { showtime( 'myTime' ) }
</script>

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 24205292
For example, this works just fine.
<html>
<head>
<script type='text/javascript'>
  function showtime( id ) {
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
 
    var suffix = "AM";
    if ( hours >= 12 ) {
      suffix = "PM";
      hours = hours - 12;
    }
    if (hours == 0) {
      hours = 12;
    }
    if (minutes < 10) {
      minutes = "0" + minutes
    }
    var place = document.getElementById( id )
    if ( place ) {
      place.innerHTML = "<b>As Of " + hours + ":" + minutes + " " + suffix + "</b>"
    } else {
      alert( 'showtime() : specified element not found. id="' + id + '"' )
    }
  }
  window.onload = function() { showtime( 'myTime' ) }
</script>
</head>
<body>
<table border='1'>
  <tr>
    <td><span id='myTime'></span></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:drelinger
ID: 31573267
Thank you very much.  Worked perfectly.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24207221
Excellent.  I'm glad to have been able to help.

Thanks for the grade & the points.

Good luck & have a great day.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question