All geek questions in one place

Move JS code from HTML to HEAD source section

I have a problem, and I would like you to advise me to solve it, if you do not mind ... In my HTML source code there were several fragments of CSS codes here and there. So I decided to put it in a file called main.css and do the following in the chapter section

<link href="css/principal.css" rel="stylesheet" type="text/css" />

It worked wonderfully! My idea was to do the same with the javascript code in my HTML, but that didn't work. This is one of them:

 $("[data-slider]") .each(function () { var input = $(this); $("<span>") .addClass("output") .insertAfter($(this)); }) .bind("slider:ready slider:changed", function (event, data) { $(this) .nextAll(".output:first") .html(data.value); });

Is there any special way to do this? My goal is that the page has the least amount of code, I am well indented, documented and clean. Greetings, I will wait for your answers! Please excuse my English ...

+6
source share
5 answers

You need to wrap this in $ (document) .ready (...)

In addition, it has an unusual indent. It would probably be better to format it like this:

 $(document).ready(function() { $("[data-slider]").each(function () { var input = $(this); $("<span>").addClass("output").insertAfter($(this)); }).bind("slider:ready slider:changed", function (event, data) { $(this).nextAll(".output:first").html(data.value); }); });

I personally don’t like chaining as many commands as this on a line. This can be EASIER more efficient, but makes debugging and troubleshooting difficult. I personally split .each () and .bind () into separate statements. But I suppose that is a matter of preference.

+5
source

. ready () documentation

 $(document).ready(function(){ // your code here });

or

. load () documentation

 $(window).on('load', function(){ // your code here });
+4
source

Put your js code in a separate .js file. Just as CSS is also placed in a separate file, and then links it to your html file.

for example in your html file:

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

And yes, you have to transfer your js code to the document.ready function so that it can be executed when the loading of document elements is completed.

For instance:

 $(document).ready(function() { // Your JS code here });

This is because the HTML interpreter for browsers reads code from TOP to BOTTOM , so if you did not set document.ready , JavaScript will run before any of your document elements are loaded .

+2
source

Head:

 <head> <link href="css/principal.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="myscript.js"></script> </head>

myscript.js

 $(function() { $("[data-slider]") .each(function () { var input = $(this); $("<span>") .addClass("output") .insertAfter($(this)); }) .bind("slider:ready slider:changed", function (event, data) { $(this) .nextAll(".output:first") .html(data.value); }); });
+1
source

I would like to add that if you plan to put your js code in a separate file, this is a good idea. You should know that you do not have to use ...

 <script> //js code </script>

... script tags in a separate js file.

0
source

Source: https://habr.com/ru/post/951950/

More articles:


All Articles