Js inside html is working, but not external

Question

When using inline js its working fine, but when external (source is correct) its not working. Tried altready in header as well in the body as last point, its not working when js file is external. What could be the reason?

Jquery (different versions) also tried.

Answer 1

There maybe only one possibility file path.

Answer 2

When I click on the file path, the js file is opening. The path seems to be correct.

Answer 3

Could you post a link to your code? ... or at least copy the html code you use to link the external js?

Answer 4

Yes sure, the js links I have put before the tag </head> like that:

<script src="https://code.jquery.com/jquery-2.2.4.min.js integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script src="/src/js/script.js"></script>

Answer 5

This is my js code.

$(document).ready(function() {

                $('.toggle-blog1').click(function() {

                               $('#showblog1').slideToggle('200');

                });

                });

                $('.toggle-blog2').click(function() {

                               $('#showblog2').slideToggle('200');

                });

                $('.toggle-blog3').click(function() {

                               $('#showblog3').slideToggle('200');

                });

                $('.toggle-blog4').click(function() {

                               $('#showblog4').slideToggle('200');

                });

                function myFunction() {

                var x = document.getElementById("myLinks");

               if (x.style.display === "block") {

               x.style.display = "none";

               } else {

    x.style.display = "block";

               }

                }

});

Answer 6

Error in Chrome Console:

script.js:38 Uncaught SyntaxError: Unexpected token '}'

Its because of the document ready function where in beginning I have an additional });  but when I remove it, the toggle function is not working correct, it opens and closes automatically. With that additional }); the code is working. But therefore that error occurs in the console.

The code works perfect when I put it inside the index.html just before </body> element.

But when I link that code external, its not working. I have 2 scripts linked before </head> element in this order:

<script  src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="/src/js/script.js"></script>

</head>

When Chrome Console can see that error with that }); that means my linking in the html file for script.js must be correct? Or does Console see that external file, although it could still be wrong linked, no idea. I dont get it. I tried many things. Linking script.js into end of body element too, or changing $ into Jquery.

Answer 7

your code fixed (just the first lines):

$(document).ready(function() {
$('.toggle-blog1').click(function() {
$('#showblog1').slideToggle('200');
});
// });

The unexpexted token at the end is because you put it before.

However, check your source file, as your copy/paste has lot of unbreakable chars, wich seems not be a problem for JS engine, but could be, and HTML engine doesn't support them... your script tag linking jQuery shouldn't work as one of these special invisible space chars is appended to the tag name (may be a valid char identifier, making "script■" != 'script' -- square is the unbreakable space).

Easily check and fix: open a code playground project on the website (code.sololearn.com) and paste your html/css/js source in respective tabs... the unbreakable spaces will be hilighted (magenta, in dark mode). Remove them, copy/paste in your PLAIN TEXT editor, and save it as PLAIN TEXT absolutly if rather using a word processor ^^