Reputation: 225

How would I call a javascript function in html?

I'm trying to call a function so that I can print the date on my page.

Id like to have it show in a

<p>function output would go here</P>

function printdate()
{

var today = new date;

var fulldate = document.getElementById("fulldate");
fulldate.textContent = today.getTime();

}

This is my full script i'm not entirely sure what I have been doing wrong or what I need to do to correct the issue.

    <html>
<head>
<!-- 

   Happy New Years
   Author: Professor Myron Wilson
   Date:   8/1/2006

   Filename:         happynewyears.htm
   Supporting files: e.jpg, library.js, newyearseve.gif, styles.css
-->

<title>North Pole Novelties</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Add library.js below -->



<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
</head>

<body>
<table id="npn" cellpadding="5" cellspacing="0">
<tr>
<!-- Company Hyperlinks -->
<td id="links" rowspan="4" valign="top">
   <a href="#">The New Year's Event Agenda</a>
   <a href="#"></a>
   <a href="#">New Year's Eve Happy Hour</a>
   <a href="#">New Year's Eve Concert</a>
   <a href="#">New Year's Eve Party</a>
   <a href="#">New Year's Day Brunch</a>
</td>

<!-- Days until New Year's Eve -->


<td id="daycell">



<p id="fulldate"></p>



<p id="Xyear"></p>Days left until New Years








<script>

// Add script tag and declare variables and assign values


    function NYEDays(CheckDay) 
{
   var XYear=CheckDay.getFullYear();
   var XDay=new Date("December, 31, 2014");
   XDay.setFullYear(XYear);
   var DayCount=(XDay-CheckDay)/(1000*60*60*24);
   DayCount=Math.round(DayCount);
   return DayCount;
}

function printdate()
{

    var today = new date();

    var fulldate = document.getElementById("fulldate");
    fulldate.textContent = today.getTime();

}



<!-- Add date output statement --> 








<!-- Add decision statment for number of days -->

    if (days < 2)
{
    alert("Almost here!")   
}

</script>



</td>
</tr>

<tr>
<!-- Company Logo -->
<td id="logo">
   <img src="newyearseve.gif" alt="New Year's Eve!" />
</td>
</tr>

<tr>
<!-- Articles about the company -->
<td>
   <table cellspacing="4" cellpadding="4">
   <tr>
   <!-- Welcome message -->
   <td id="firstcol" valign="top">
      <p>
      NEW YEAR'S EVE ENTERTAINMENT Consider us your complete 
      New Year's Eve entertainment needs. We offer a excellent two days of events of elegance
      and style.</p>

   <!-- Latest news -->
      <h3>NEW YEAR'S EVE HAPPY HOUR</h3>
      <p>It starts at 5:00p.m. Mengle with everyone while consuming 
       the finest spirits and eating the best horderves. </p>

      <h3>NEW YEAR'S EVE CONCERT</h3>
      <p>When you hear the band play and the artists sing, you are hearing our concert
      At 7:00p.m., listen to some of the best groups Atlanta has to offer. </p>

      <h3>NEW YEAR'S EVE PARTY</h3>
      <p>This is the event of the year. Jam to the sounds of everyone's
      favorite radio disc jockey and bring in the new year with a bang
      starting at 10:00 p.m. </p>

      <h3>NEW YEAR'S DAY BRUNCH</h3>
      <p>There is no other way to close out the vent with a delicious brunch
      with everyone's breakfast and lunch favorites at 11:00 a.m. </p>
   </td>

   <!-- Information about the company -->
   <td id="secondcol" valign="top">
      <h3>Elegance Entertainment</h3>
      <p>
      <img src="e.jpg" alt="" style="float: right; margin: 0px 0px 10px 10px" />
      Elegance Entertainment is a company that specialize in major events.
      Established in 2003, Elegance has been providing events for the professional
      market in the Atlanta area.</p>
   </td>
   </tr>
   </table>
</td>
</tr>

<tr>
<!-- Contact Information -->
<td id="contact">
   <b>Elegance Entertainment</b> | 
   324 King Avenue | 
   Atlanta, GA 30332 | 
   (404) 555-2015
</td>
</tr>
</table>

<script type="text/javascript" src="library.js"></script>
</body>
</html>

Upvotes: 1

Answers (4)

Akhil Vijay

Reputation: 87

In order to call the function on page loading just simply call the function in the script section. Use inner HTML to display. Make the code easy and simple.

Here is the script:

function printdate() {
    document.getElementById("dat").innerHTML = Date();
}
printdate();  //calling date

You can also write the function like this:

function printdate() {
    return new Date();
}
document.getElementById("dat").innerHTML =printdate();

The HTML section:

<div>
    <p id="dat"></p>
</div>

This will help you:

Click to see this fiddle

This link will help you to create date format

This snippet shows the date:

   <html>
<head>
<!-- 
   Happy New Years
   Author: Professor Myron Wilson
   Date:   8/1/2006
   Filename:         happynewyears.htm
   Supporting files: e.jpg, library.js, newyearseve.gif, styles.css
-->

<title>North Pole Novelties</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Add library.js below -->
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
</head>

<body>

<table id="npn" cellpadding="5" cellspacing="0">
<tr>
<!-- Company Hyperlinks -->
<td id="links" rowspan="4" valign="top">
   <a href="#">The New Year's Event Agenda</a>
   <a href="#"></a>
   <a href="#">New Year's Eve Happy Hour</a>
   <a href="#">New Year's Eve Concert</a>
   <a href="#">New Year's Eve Party</a>
   <a href="#">New Year's Day Brunch</a>
</td>

<!-- Days until New Year's Eve -->


<td id="daycell">


<p id="Xyear">Days left until New Years</p>
<p id="dat"></p>
<script type="text/javascript" >

// Add script tag and declare variables and assign values


    function NYEDays(CheckDay) 
{
   var XYear=CheckDay.getFullYear();
   var XDay=new Date("December, 31, 2014");
   XDay.setFullYear(XYear);
   var DayCount=(XDay-CheckDay)/(1000*60*60*24);
   DayCount=Math.round(DayCount);
   return DayCount;
}

function printdate() {
 return new Date();
}
document.getElementById("dat").innerHTML =printdate();
<!-- Add date output statement --> 


<!-- Add decision statment for number of days -->

    if (days < 2)
{
    alert("Almost here!")   
}

</script>
</td>
</tr>

<tr>
<!-- Company Logo -->
<td id="logo">
   <img src="newyearseve.gif" alt="New Year's Eve!" />
</td>
</tr>

<tr>
<!-- Articles about the company -->
<td>
   <table cellspacing="4" cellpadding="4">
   <tr>
   <!-- Welcome message -->
   <td id="firstcol" valign="top">
      <p>
      NEW YEAR'S EVE ENTERTAINMENT Consider us your complete 
      New Year's Eve entertainment needs. We offer a excellent two days of events of elegance
      and style.</p>

   <!-- Latest news -->
      <h3>NEW YEAR'S EVE HAPPY HOUR</h3>
      <p>It starts at 5:00p.m. Mengle with everyone while consuming 
       the finest spirits and eating the best horderves. </p>

      <h3>NEW YEAR'S EVE CONCERT</h3>
      <p>When you hear the band play and the artists sing, you are hearing our concert
      At 7:00p.m., listen to some of the best groups Atlanta has to offer. </p>

      <h3>NEW YEAR'S EVE PARTY</h3>
      <p>This is the event of the year. Jam to the sounds of everyone's
      favorite radio disc jockey and bring in the new year with a bang
      starting at 10:00 p.m. </p>

      <h3>NEW YEAR'S DAY BRUNCH</h3>
      <p>There is no other way to close out the vent with a delicious brunch
      with everyone's breakfast and lunch favorites at 11:00 a.m. </p>
   </td>

   <!-- Information about the company -->
   <td id="secondcol" valign="top">
      <h3>Elegance Entertainment</h3>
      <p>
      <img src="e.jpg" alt="" style="float: right; margin: 0px 0px 10px 10px" />
      Elegance Entertainment is a company that specialize in major events.
      Established in 2003, Elegance has been providing events for the professional
      market in the Atlanta area.</p>
   </td>
   </tr>
   </table>
</td>
</tr>

<tr>
<!-- Contact Information -->
<td id="contact">
   <b>Elegance Entertainment</b> | 
   324 King Avenue | 
   Atlanta, GA 30332 | 
   (404) 555-2015
</td>
</tr>
</table>

<script type="text/javascript" src="library.js"></script>
</body>
</html>

Upvotes: 2

Nitin Ayir

Reputation: 54

Actually, you should define date on the input element, rather defining it on paragraph tag. It's a good practice followed across development.

You can check this example, to resolve your issue: w3schools reference http://www.w3schools.com/js/js_dates.asp

Upvotes: 0

guest271314

Reputation: 1

Substitute new Date() for new date; also include id="fulldate" attribute at <p> element

<p id="fulldate">function output would go here</p>
<script>
  function printdate() {

    var today = new Date();

    var fulldate = document.getElementById("fulldate");
    fulldate.textContent = today.getTime();

  }
  printdate()
</script>

Upvotes: 1

gavgrif

Reputation: 15489

Is the function to be called from an action or is it a function that executes on page load?

<body onload="printdate()">

Upvotes: 1

How would I call a javascript function in html?

Answers (4)

Related Questions