Why is my Javascript and JQuery scripting not working?

Question

I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.

I was trying to use this code:(well, not exactly this code, but something like it)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
    var code = document.getElementsByTagName("body");
    code.append("<p>Yes it did.</p>");
}
        </script>
    </head>
    <body onload="doThisWhenLoaded">
        <h1 style="font-family:sans-serif;">Did it work?</h1>
    </body>
</html>

And nothing happened. All that it did was show the h1 code that I put in there.

Possible duplicate of [JavaScript that executes after page load](https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — zfrisch, Nov 27 '18 at 18:03
Also, you're using jQuery's `append()` incorrectly. It must be applied to a jQuery object (`$('body').append()`). — isherwood, Nov 27 '18 at 18:05
Ok, I will try that, because I just noticed that I was using JQuery on an element selected by Javascript. — WebCoder, Nov 28 '18 at 13:44

Tom O. · Answer 1 · 2018-11-28T14:54:45.290

You forgot to include the parenthesis to call the function in the body element's onload attribute:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    function doThisWhenLoaded() {
      //Modified the two lines below slightly
      var code = document.querySelector("body");
      code.innerHTML += "<p>Yes it did.</p>";
    }
  </script>
</head>

<body onload="doThisWhenLoaded()">
  <h1 style="font-family:sans-serif;">Did it work?</h1>
</body>

</html>

A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:

document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
  selector: 'body',
  html: '<p>Yes it did.</p>'
}));

function appendHtml(config) {
  document.querySelector(config.selector).innerHTML += config.html;
}

<h1 style="font-family:sans-serif;">Did it work?</h1>

I actually was trying to use JQuery, not just Javascript. The only reason this question's title contains the word Javascript is because I was confused and trying to use JQuery on a element selected by Javascript and it didn't work. — WebCoder, Nov 28 '18 at 13:58

score 2 · Accepted Answer · answered Nov 27 '18 at 18:05

Since you are already including jQuery try this

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    var code = $("body");
    code.append("<p>Yes it did.</p>");
});
        </script>
    </head>
    <body >
        <h1 style="font-family:sans-serif;">Did it work?</h1>
    </body>
</html>

Maarti · Answer 3 · 2018-11-27T18:11:24.520

Two reason why it doesn't work:

To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()

Here is the code corrected:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
    $("body").append("<p>Yes it did.</p>");
}
        </script>
    </head>
    <body onload="doThisWhenLoaded()">
        <h1 style="font-family:sans-serif;">Did it work?</h1>
    </body>
</html>

Why is my Javascript and JQuery scripting not working?

3 Answers3