reference html in .js

Question

Simple question.

I'm newbie on javascript and html.

I have a file index.html like:

<html>
<head>
<link rel=StyleSheet href="beauty.css" type="text/css">
<script src="myjs.js"></script>

</head>
<body>
<p id="foo"></p>
</body>
</html>

and this is my js file:

var d=new Date();
var month = d.getMonth()+1;
var data = d.getDate() + "/" + month + "/" + d.getFullYear();
function showdata(){
    return data;
}

document.getElementById("foo").innerHTML=showdata();

I understand that I need to reference the html, but I do not have idea how to do that.

What do you mean by reference the html? That could mean a lot of different things... — Jon Egeland
– Jon Egeland, Commented Jul 7, 2012 at 23:12

Conner · Accepted Answer · 2012-07-07 23:15:11Z

1

You might want

window.onload = function() {
   var d=new Date();
   var month = d.getMonth()+1;
   var data = d.getDate() + "/" + month + "/" + d.getFullYear();
   function showdata(){
       return data;
   }

   document.getElementById("foo").innerHTML=showdata();
}

You also might want to specify type="text/javascript" in your <script> tag.

answered Jul 7, 2012 at 23:15

Conner

31.4k8 gold badges55 silver badges75 bronze badges

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

1 Comment

Scott Sauyet Over a year ago

One trouble with window.onload is that only one function can be attached this way. If you need it for some other purpose, or you use some third-party script that does, one declaration will override all the others. You might want to try Xavi's solution, or look at something to help you run multiple events when the DOM is ready or the window is loaded, not just a single one.

Xavi · Accepted Answer · 2012-07-07 23:14:21Z

0

Try moving the script tag to the bottom of the page. Right before closing </body> tag. Something like this:

<html>
    <head>
    <link rel=StyleSheet href="beauty.css" type="text/css">

    </head>
    <body>
        <p id="foo"></p>
        <script src="myjs.js"></script>
    </body>
</html>

The problem is that your javascript code was executed before the paragraph element was part of the page.

answered Jul 7, 2012 at 23:14

Xavi

20.5k14 gold badges74 silver badges64 bronze badges

1 Comment

Xavi Over a year ago

Why the down votes? Moving your scripts to the bottom of the page is generally good practice regardless. It helps improved perceived page load. Browsers must pause page rendering every time a script tag is encountered. By putting script tags at the bottom of the page, the browser has a chance to render all the page's content before pausing to execute javascript. Also, window.onload is only executed once all the assets on the page are loaded which in many cases needlessly delays javascript execution.

Collectives™ on Stack Overflow

reference html in .js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related