Simple JS Date Button explained

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

This first tutorial is a very simple one, we are going to make a button and have it check the time and display it on the screen.

Code: [ Select ]
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript">
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
</script>
</head>
<body>

<h1>Ozzu JavaScript</h1>
<p id="date">Click here to check the date from your computer.</p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>
</html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script language="javascript" type="text/javascript">
  5. function displayDate()
  6. {
  7. document.getElementById("date").innerHTML=Date();
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <h1>Ozzu JavaScript</h1>
  13. <p id="date">Click here to check the date from your computer.</p>
  14. <button type="button" onclick="displayDate()">Display Date</button>
  15. </body>
  16. </html>


Making note about the full stops
Code: [ Select ]
document.getElementById("date").innerHTML=Date();
The full stops between each element function is a + variable so this line would mean document+getElementById("date")+innerHTML=Date();
  1. document.getElementById("date").innerHTML=Date();
  2. The full stops between each element function is a + variable so this line would mean document+getElementById("date")+innerHTML=Date();



lines 1-3 General HTML header
line 4 Script tag where we have set the JavaScript language and text type JavaScript
line 5 First Function with displayDate()
line 6 { open the function
line 7 Document = page
getElementById("date") = requesting information using a variable
innerHTML=Date() = ID for HTML to run the function
line 8 } Close off the function | this section finished
line 9 closing of script
line 10 closing of head
line 11 Body Start
line 12 header1 title
line 13 p tag using id(date) requested the script above via the "date"
line 14 button tag made a button | onclick "displayDate()" is going to load the function from the script when clicked.
line 15-16 closing HTML


I have taken a simple script in Javascript and broken it down line by line to give starting script writers a better understanding of what they are looking at but if you can understand how a button works and works with the script on how to load a function then it is a good start.

Also i am more then happy to work on more complex tutorials if someone requests.

Post Information

  • Total Posts in this topic: 1 post
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 1 guest
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.