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 — zfrisch
– zfrisch, Commented Nov 27, 2018 at 18:03
Also, you're using jQuery's append() incorrectly. It must be applied to a jQuery object ($('body').append()). — isherwood
– isherwood, Commented Nov 27, 2018 at 18:05
Ok, I will try that, because I just noticed that I was using JQuery on an element selected by Javascript. — WebCoder
– WebCoder, Commented Nov 28, 2018 at 13:44

MikeS · Accepted Answer · 2018-11-27 18:05:14Z

2

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>

answered Nov 27, 2018 at 18:05

MikeS

1,7641 gold badge9 silver badges13 bronze badges

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

Comments

Tom O. · Accepted Answer · 2018-11-28 14:54:45Z

2

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>

edited Nov 28, 2018 at 14:54

answered Nov 27, 2018 at 18:04

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

1 Comment

WebCoder Over a year ago

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.

Maarti · Accepted Answer · 2018-11-27 18:11:24Z

1

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>

edited Nov 27, 2018 at 18:11

answered Nov 27, 2018 at 18:05

Maarti

3,7294 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Why is my Javascript and JQuery scripting not working?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related