Solved

JavaScript, formatting 3-char month, and basic HTML coding

Posted on 2014-09-25
9
201 Views
Last Modified: 2014-09-25
I'm trying to pull out a 3 month date value in JavaScript.

From this link (Apr 29, 8:20, third answer), I tried the basics but it's not working. So I need help with the HTML setup as well as verifying the actual date logic I'm using.

<HTML>
<HEAD>
<TITLE>My Test : </TITLE>
Date.prototype.monthNames = [
    "January", "February", "March",
    "April", "May", "June",
    "July", "August", "September",
    "October", "November", "December"
];

Date.prototype.getMonthName = function() {
    return this.monthNames[this.getMonth()];
};
Date.prototype.getShortMonthName = function () {
    return this.getMonthName().substr(0, 3);
};
</HEAD>
<BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080"onLoad="return PRMI_OnLoad()">


// usage:
var d = new Date();
alert(d.getMonthName());      // "October"
alert(d.getShortMonthName()); // "Oct"

<P>Body of page</P>
</BODY>
</HTML>

Open in new window

0
Comment
Question by:Gadsden Consulting
  • 5
  • 3
9 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
ID: 40344008
You're missing the script tags around your code:
<HTML>
    
    <HEAD>
        <TITLE>My Test :</TITLE>
        <script>
            Date.prototype.monthNames = [
                "January", "February", "March",
                "April", "May", "June",
                "July", "August", "September",
                "October", "November", "December"];

            Date.prototype.getMonthName = function() {
                return this.monthNames[this.getMonth()];
            };
            Date.prototype.getShortMonthName = function() {
                return this.getMonthName().substr(0, 3);
            };
        </script>
    </HEAD>
    
    <BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080" onLoad="return PRMI_OnLoad()">
        <P>Body of page</P>
        <div id="txtDate"></div>
        
        <script>
            var d = new Date(); 
            alert(d.getMonthName());
            
            alert(d.getShortMonthName());
        </script>
        
    </BODY>

</HTML>

Open in new window

0
 

Author Comment

by:Gadsden Consulting
ID: 40344036
oh, oops, thanks ! gotta love HTML, mentors at the ready :-)
0
 
LVL 20

Assisted Solution

by:Daniel Van Der Werken
Daniel Van Der Werken earned 250 total points
ID: 40344048
My version in case it helps you any, but Alexandre has the idea.

<HTML>
<HEAD>
<TITLE>My Test : </TITLE>
<script type="text/JavaScript">
Date.prototype.monthNames = [
    "January", "February", "March",
    "April", "May", "June",
    "July", "August", "September",
    "October", "November", "December"
];

Date.prototype.getMonthName = function() {
    return this.monthNames[this.getMonth()];
};
Date.prototype.getShortMonthName = function () {
    return this.getMonthName().substr(0, 3);
};
</script>
</HEAD>
<BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080"onLoad="return PRMI_OnLoad()">

<script type="text/JavaScript">
// usage:
var PRMI_OnLoad = new function(){
var d = new Date();
alert(d.getMonthName());      // "October"
alert(d.getShortMonthName()); // "Oct"
}
</script>
<P>Body of page</P>
</BODY>
</HTML>

Open in new window

0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:Gadsden Consulting
ID: 40344072
ok, that worked, but a couple of questions . . .

- why is the script in the body below the para ?

- I'd like to say <P>Body of page, and this month is d.getShortMonthName</P>

- I know the very basics of <div>, but is it doing anything on my page ?
0
 

Author Comment

by:Gadsden Consulting
ID: 40344085
Dan7el, thank you too !

also, you have the script in HEAD above the para, in contrast to Alexandre. What are the considerations here ?

Plus, as I said above, I would like to display on the screen:

"Body of page: and this month is September, abbreviation = SEP"
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
ID: 40344165
Well, putting the script at the end of the body allows you to safely interact with the HTML.
If from the script you need to interact with the HTML (like my next example) you have to be sure the HTML is already parsed.
<HTML>
    
    <HEAD>
        <TITLE>My Test :</TITLE>
        <script>
            Date.prototype.monthNames = [
                "January", "February", "March",
                "April", "May", "June",
                "July", "August", "September",
                "October", "November", "December"];

            Date.prototype.getMonthName = function() {
                return this.monthNames[this.getMonth()];
            };
            Date.prototype.getShortMonthName = function() {
                return this.getMonthName().substr(0, 3);
            };
        </script>
    </HEAD>
    
    <BODY BGCOLOR="FFFFFF" LINK="000080" VLINK="000080" onLoad="return PRMI_OnLoad()">
        <P>Body of page</P>
        <div id="txtDate">
            Body of page, and this month is <span id="mydate"></span>
        </div>
        
        <script>
            var d = new Date(); 
            document.getElementById('mydate').innerHTML = d.getMonthName();
        </script>
        
    </BODY>

</HTML>

Open in new window

As you can see there I'm manipulating the HTML, setting the content of the placeholder span with the month.
If you move this script block to the header or to the beginning of the body it will fail to find the mydate span.
0
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
ID: 40344169
Ah... and javascript cannot be "inlined"...
So things like <P>Body of page, and this month is d.getShortMonthName</P> are not possible.
0
 

Author Comment

by:Gadsden Consulting
ID: 40344273
Alexandre,

ok, makes sense, thanks ! I became a newbie JS / HTML person about 6 years ago for a  short period, so I'm dusting off some cobwebs to reveal a newbie's knowledge . . .
0
 

Author Closing Comment

by:Gadsden Consulting
ID: 40344277
great ! thank you both.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

825 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