Why is this JavaScript not executing? [duplicate]

Question

I am learning HTML, CSS and JavaScript. Now I want to write the document title in a <p> tag and I wrote this HTML file:

<!DOCTYPE html>
<html>

<head>
    <title>HTML experimentation</title>
    <script>
        document.getElementById("document_title").innerHTML = document.title;
    </script>
</head>

<body>
    <p id="document_title">This text should be replaced by the title of the document</p>
</body>

</html>

According to the tutorials I find on the web, this should work. It does not. Why?

I have noted that if I do this:

<!DOCTYPE html>
<html>

<head>
    <title>HTML experimentation</title>
    
    <meta charset="utf-8">
    <script type="text/javascript"
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {
              inlineMath: [ ['$','$'], ["\\(","\\)"] ],
              processEscapes: true
            }
        });
        document.getElementById("document_title").innerHTML = document.title;
    </script>
</head>

<body>
    <p id="document_title">This text should be replaced by the title of the document</p>
</body>

</html>

it works. This, however, does not seem to be the way of making what I want.

Always check your browser's console for errors.

Ivar
– Ivar

2021-03-29 07:54:52 +00:00
Commented Mar 29, 2021 at 7:54 — Ivar
– Ivar, Commented Mar 29, 2021 at 7:54

Manas Khandelwal · Accepted Answer · 2021-03-29 08:08:20Z

-1

The p tag has not been loaded when your script was executed.

The script tag should always be before or after the </body> closing tag.

<!DOCTYPE html>
<html>

<head>
  <title>HTML experimentation</title>
</head>

<body>
  <p id="document_title">This text should be replaced by the title of the document</p>

  <script>
    document.getElementById("document_title").innerHTML = document.title;
  </script>
</body>

</html>

Some useful resources

edited Mar 29, 2021 at 8:08

answered Mar 29, 2021 at 7:54

Manas Khandelwal

3,9442 gold badges15 silver badges26 bronze badges

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

4 Comments

user171780 Over a year ago

"The script tag should always be before or after the </body> closing tag." this is wrong according to this tutorial. However, your solution worked. I guess it is the fact that the <p> has not been loaded.

Manas Khandelwal Over a year ago

@user171780 That is correct in some cases only because you can not do DOM Manipulation there. Read this: stackoverflow.com/questions/7452458/html-script-tag-placement

Manas Khandelwal Over a year ago

@user171780 If you want to know more about this read: stackoverflow.com/a/24070373/11171286

user171780 Over a year ago

Thanks, your comments are very helpful. I am waiting the annoying StackOverflow timer to accept your answer.

Collectives™ on Stack Overflow

Why is this JavaScript not executing? [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related