Why my javascript file doesn't load?

Question

This is the code of my html file:

<html>
    <head>
        <script type="text/javascript" src="try1.js"></script>
    </head>

    <body>

        <h1>A Web Page</h1>
        <p id="demo">A Paragraph</p>
        <button type="button" onclick="myFunction()">Try it</button>

    </body>
</html>

And this is the code of my javascript file:

function myFunction() {
     document.getElementById("demo").innerHTML = "Paragraph changed";
}

what do you mean it does not load.Did you check chrome developer tools and network tab of it.Did you find this js in that tab? — VivekN
– VivekN, Commented Jun 14, 2017 at 19:53
Is the try1.js file on the same folder with your HTML file? — Tasos K.
– Tasos K., Commented Jun 14, 2017 at 19:56
Do not put parenthesis in onclick. it should be onclick="myFunction" — 97amarnathk
– 97amarnathk, Commented Jun 14, 2017 at 19:57
Hate to nitpick, but just a note: in general if you're only going to change the text of the element you should use innerText instead of innerHTML--it's a lot safer :) — victor
– victor, Commented Jun 14, 2017 at 20:07

styfle · Accepted Answer · 2017-06-14 19:58:13Z

4

Because the element doesn't exist yet. Try putting the javascript at the end of the body

<html>
    <head>
        <title>Example<title>
    </head>
    <body>

        <h1>A Web Page</h1>
        <p id="demo">A Paragraph</p>
        <button type="button" onclick="myFunction()">Try it</button>
        <script type="text/javascript" src="try1.js"></script>
    </body>
</html>

It seems to work just fine when inlining.

   
        <h1>A Web Page</h1>
        <p id="demo">A Paragraph</p>
        <button type="button" onclick="myFunction()">Try it</button>
        <script type="text/javascript">
        function myFunction() {
            document.getElementById("demo").innerHTML = "Paragraph changed";
        }
        </script>

edited Jun 14, 2017 at 19:58

answered Jun 14, 2017 at 19:51

styfle

25k30 gold badges93 silver badges142 bronze badges

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

4 Comments

Tasos K. Over a year ago

The issue is not that. The code document.getElementById("demo") will run when the button will be clicked, and at that time the element will exist on DOM

VivekN Over a year ago

@TasosK. exactly what I meant.

styfle Over a year ago

@TasosK. I see. Well I inlined the code and it works fine. So maybe your js file is not in the same directory as the html file.

VivekN Over a year ago

@styfle It works with his code as well.The problem here is probably his JS file name is either incorrect or path is wrong.

frodo2975 · Accepted Answer · 2017-06-14 19:56:57Z

-1

The usual way to do this is to wrap your javascript in jquery's document ready function like this. If you're not using jquery, you should check it out, it's really useful.

$( document ).ready(function() {
    console.log( "ready!" );
});

answered Jun 14, 2017 at 19:56

frodo2975

12k5 gold badges39 silver badges51 bronze badges

3 Comments

VivekN Over a year ago

Why are you introducing another library here.Plain JS does the job.

Christopher Schneider Over a year ago

There is nothing in this question that necessitates the use of jQuery

frodo2975 Over a year ago

Not trying to start a holy war, but if you're not using jquery in this day and age, you really should be. If you don't, you have to worry about things like cross-browser compatibility and you end up reinventing the wheel.

Collectives™ on Stack Overflow

Why my javascript file doesn't load?

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related