Trying to output Javascript from HTML

Question

I'm currently at my wits end I'm trying to output the javascript function NYEDays inside a div. Ive tried a number of different combinations from different sites but I have yet to find a solution for this problem.

 <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 -->

<script type="text/javascript" src="library.js"></script>
<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">

<div class="container">

    <div class="row">

        <div class="NYEDays">

        </div>

    </div>

</div>

<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;
}


<!-- Add date output statement --> 



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


</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>

</body>
</html>

u haven't even call the java script function NYEDays anywhere , its unclear what do u wants to achieve — Gayathri Mohan
– Gayathri Mohan, Commented Jun 9, 2016 at 1:53
How would I call the function? I'm trying to find it on other sites but haven't had any luck so far. — nathan rivera
– nathan rivera, Commented Jun 9, 2016 at 2:45

Barmar · Accepted Answer · 2016-06-09 03:38:16Z

1

Call the function and write the result into the DIV's innerHTML.

I added an ID to the DIV.

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;
}

// Add date output statement

var days = NYEDays(new Date);
document.getElementById("NYEDays").innerHTML = days;

// Add decision statment for number of days

if (days < 2) {
  alert("Woot! It's almost here");
}

<div class="container">
  <div class="row">Days until New Year:
    <div class="NYEDays" id="NYEDays">
    </div>
  </div>
</div>

edited Jun 9, 2016 at 3:38

answered Jun 9, 2016 at 1:52

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

StackSlave Over a year ago

.innerHTML is more backward compatible.

nathan rivera Over a year ago

I'm not sure what I'm doing wrong but it still isnt displaying it on the page after adding the script. I'm sorry if im bothering you. We were given this assignment for our classes without really going into Javascript so i'm rather confused.

Barmar Over a year ago

I don't understand all these classes where they give assignments without teaching the basics required to do them. Why are you taking a class that doesn't teach?

Barmar Over a year ago

I didn't notice that the DIV had a class, but no ID. I added the ID, now it works.

Collectives™ on Stack Overflow

Trying to output Javascript from HTML

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related