where to embed javascript section in a html page

Question

the thing is i'm unable to figure out where to embed javascript in html page whether in head section or body section.

example 1:

 <html>
      <head>
       <title>events</title>
        <script>
          document.getElementById("b").onclick=function(){displayDate()};
          function displayDate()
          {
            document.getElementById("demo").innerHTML=Date();
          }    
        </script>   
      </head>
      <body>
        <p id="demo"></p>
        <button id="b">new</button>
      </body>
    </html>

in the above example I placed script tags in head section but it is not working.

example: 2

<html>
  <head>
    <title>events</title>
    <script>
      function upper()
      {
        var x=document.getElementById("t"); 
        x.value=x.value.toUpperCase();
      }
    </script>
  </head>
  <body >
    enter some text:<input type="text" id="t" onChange="upper()"/>
  </body>
</html>

in the second example I placed the javascript in head section it is working properly.first example demonstrates that on clicking a button date will be displayed in the second example in a text box when data is entered and if we come out of the box the letters in the box will we converted to uppercase.

You should put it at the end of the body, right before `
`.
– McGarnagle Jun 16 '13 at 08:58 — McGarnagle, Jun 16 '13 at 08:58

score 2 · Answer 1 · answered Jun 16 '13 at 09:02

2

To have it more readable I prefer to always place JavaScript in the head section. If you need to access elements from there, use the window.onload event:

<head>
<title>events</title>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById("b").onclick = function() {
            displayDate();
        };
    };

    function displayDate()
    {
        document.getElementById("demo").innerHTML=Date();
    }
</script>
</head>

This would work just fine.

Your second example worked because you just defined a function, you didn't try to access any element.

answered Jun 16 '13 at 09:02

Shadow The GPT Wizard

66,030
26
140
208

your solution is working but I didn't understand your explanation.i'm unable to figure why you placed only particular block of code in window.onload why not total script and also you mentioned that in the second example no element is being accessed but text box is accessed. – user22002 Jun 16 '13 at 09:29
@user22002 the `window.onload` block should hold only the code that is accessing the DOM. All function definitions and other code not accessing elements better be on its own. – Shadow The GPT Wizard Jun 16 '13 at 09:30
thanks I understood .can you please suggest me a good site for learning javascript because I just started learning – user22002 Jun 16 '13 at 09:38
@user22002: http://eloquentjavascript.net/, https://developer.mozilla.org/en/JavaScript/Guide – Felix Kling Jun 16 '13 at 09:44
@user22002 in addition to Felix suggestion, you have two basic options. If you want to follow standards and become "good" JavaScript programmer (rather than just one who write code that works) then you better [start here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getting_Started?redirectlocale=en-US&redirectslug=JavaScript%2FGetting_Started). If you just want to learn in the fastest way but not follow standards or good practice, you have the notorious [w3schools](http://www.w3schools.com/js/). Your choice. – Shadow The GPT Wizard Jun 16 '13 at 09:59
I used to study from w3schools.com but I will discontinue that and I will start in that Mozilla developer site thanks for your suggestions. – user22002 Jun 17 '13 at 16:18

score 0 · Answer 2 · answered Jun 16 '13 at 09:02

You can put it in the head. The problem is that your examples are not the same. The first one doesn't work because the current date is retrieved by calling Date(), when it should be new Data().getDate(). The second example works because the code is valid.

score 0 · Answer 3 · answered Jun 16 '13 at 09:03

0

The problem you're running into is that you're trying to reference an element before it is loaded into the DOM.

When you're putting the script in the HEAD tag, the dom hasn't been loaded yet and the document.getElementById won't find what you're looking for.

You have a few different options to deal with this. You can put the script at the end of the page, which will work for your small example here.

Probably a better option is to take a look at learning/using jquery or another js utility. Jquery makes it easy to solve this issue by giving you a "ready" event. This ready event will be triggered when the DOM is fully loaded. So:

$(document).ready(
  function()
  {
     $("#demo").html((new Date()).toString());
  });

Is all you really need. With this approach, it doesn't matter where the script it on the page.

answered Jun 16 '13 at 09:03

Clayton Gulick

9,755
2
36
26

1

No need for jQuery just for that, `window.onload` is as easy to use and as cross browser. – Shadow The GPT Wizard Jun 16 '13 at 09:03
That's true, but it's clear that Shadow Wizard is new to javascript, so learning how to do things with jquery is a good recommendation, imho. – Clayton Gulick Jun 16 '13 at 09:04
New like 12 years of experience? Don't make it personal, please. – Shadow The GPT Wizard Jun 16 '13 at 09:06
No, no, didn't mean to make it personal at all. The nature of the question seemed to me like you were new to js, and there's nothing wrong with that. This type of question is very common from someone who is just learning how to do things, I'm sorry if I misinterpreted it. Understanding DOM lifecycle, js loading and flow is normally one of the first things you learn when getting into js, so I think you can probably understand my confusion. – Clayton Gulick Jun 16 '13 at 09:09
I didn't ask the question, I commented on your answer. – Shadow The GPT Wizard Jun 16 '13 at 09:19

where to embed javascript section in a html page

3 Answers3