Why won't this simple code run?

Question

<html>
    <head>
    </head>
    <body>
<script>


function toD(angle) {
  return angle * (180 / Math.PI);
}
var a = document.getElementById('test').innerHTML = toD(15);
</script>

<p id='test'> </p>

    </body>
    </html>

Sorry, i'm not sure if i'm missing something, but how come this code isn't running? thank you in advance, sorry if this is a stupid question!

Move you script code at the end of the page, just before
tag — Ghazanfar Mir, Aug 12 '13 at 13:00

bizzehdee · Answer 1 · 2013-08-12T13:10:40.523

9

At the time of running var a = document.getElementById('test').innerHTML = toD(15); in your script   does not exist.

place the script AFTER   or wrap the entire script in its own function and assign it to onload so that it is only ran after   and the rest of the DOM is available.

Either

<html>
    <head>
    </head>
    <body>

<p id='test'> </p>

<script>
function toD(angle) {
  return angle * (180 / Math.PI);
}
var a = document.getElementById('test').innerHTML = toD(15);
</script>
    </body>
    </html>

OR

<html>
    <head>
    </head>
    <body>
<script>

window.onload = function() {
  function toD(angle) {
    return angle * (180 / Math.PI);
  }
  var a = document.getElementById('test').innerHTML = toD(15);
}
</script>

<p id='test'> </p>

    </body>
    </html>

Note: this is a very dirty way of using window.onload, that should only be used if this is to be the only script on the page that requires onload. For more information about using onload properly when there will be multiple scripts using it, please read How to Use window.onload the Right Way

edited Aug 12 '13 at 13:10

answered Aug 12 '13 at 12:59

bizzehdee

20,289
11
46
76

Thank you, so i should always put the script at the bottom? – Samir Aug 12 '13 at 13:00
it is depend on requirement, sometime you also need to write your script in top of the page – Butani Vijay Aug 12 '13 at 13:04
1

@Samir That's too much of a generalisation, so, no. Look at the context of what you're trying to achieve and make a decision based on those requirements and the requirements of the script(s). – Grant Thomas Aug 12 '13 at 13:04
2

DO NOT USE window.onload like that! YUCK. Next thing we will have to expalin is why having two of them will not work! – epascarello Aug 12 '13 at 13:08

score 4 · Answer 2 · answered Aug 12 '13 at 13:00

4

You need to wait until the document loads, as you're trying to access an element (#test) before the HTML has been fully parsed by the browser - you can use window.onload so that your JS is run after the document has been loaded - e.g.

window.onload = 

// JS

answered Aug 12 '13 at 13:00

Adrift

58,167
12
92
90

And are you going to answer the question when the OP tries to use 2 `window.onload =`? :) – epascarello Aug 12 '13 at 13:09

epascarello · Answer 3 · 2013-08-12T13:05:13.667

Look at the JavaScript console [f12] and you will see an error message:

Uncaught TypeError: Cannot set property 'innerHTML' of null

The error occurs because you are referencing the element before it is rendered to the page.

Put the script tag after the element so it can find the element.

<html>
    <head>
    </head>
    <body>

    <p id='test'> </p>

    <script>

        function toD(angle) {
          return angle * (180 / Math.PI);
        }
        var a = document.getElementById('test').innerHTML = toD(15);
    </script>


    </body>
</html>

score 1 · Answer 4 · answered Aug 12 '13 at 13:00

1

Because when you run document.getElementById('test') the DOM object   wasn't rendered yet.

answered Aug 12 '13 at 13:00

DontVoteMeDown

21,122
10
69
105

Jim · Answer 5 · 2013-08-27T13:07:46.793

0

Place the script at the bottom of the page to avoid problems like this noted above, also use windows.onload http://www.w3schools.com/jsref/event_onload.asp - to ensure the element is rendered before you cast on it.

edited Aug 27 '13 at 13:07

answered Aug 12 '13 at 13:01

Jim

274
3
13

3

*Always* is not good advice. – Grant Thomas Aug 12 '13 at 13:05

Butani Vijay · Answer 6 · 2013-08-13T04:18:11.123

Problem in rendering Change your code as below :

<html>
   <body>
       <p id='test'> </p>

    <script language="javascript">

       function toD(angle) {
         return angle * (180 / Math.PI);
       }
      var a = document.getElementById('test').innerHTML = toD(15);
    </script>


   </body>
  </html>

-> Please read about how web page is parse. you will clear your idea about where to write script in your page.

->object should be rendered before performing operation on it. in your code div is not rendered and you try to perform operation on it ( i.e. document.getElementById('test').innerHTML = toD(15); )

Helped if you explained why you need to do it. – epascarello Aug 12 '13 at 13:14 — epascarello, Aug 12 '13 at 13:14

Why won't this simple code run?

6 Answers6