Solved

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

Posted on 2014-09-25
9
207 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 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