How do I load a specific javascript file or javascript code into an HTML document?

Question

Here's what I'm trying to do;

I have this HTML code:

<div id="background-color-random">
    DIV CONTENT
</div>

And this javascript:

$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");

header.css("background-color", selectedColor);
});

I want to impliment this on an HTML page. I know that you can load up a *.js file by using the script tags with src="..". But that doesn't seem to work.

The javascript creates a random color and then applies that to the background of a given 'div' in the HTML.

Now, I'm not good with javascript, so please be patient with me and simple answers are needed :)

I need to be able to get the javascript to load when requested from the HTML and then apply itself to the div with id="..".

you are using JQuery functions without loading it first... suggest you go to learn.jquery.com. — Dror
– Dror, Commented Nov 21, 2013 at 21:54

Rob M. · Accepted Answer · 2013-11-21 21:54:32Z

3

You have a syntax error (missing a comma):

selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");

Should be

selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");

answered Nov 21, 2013 at 21:54

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

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

Comments

cssyphus · Accepted Answer · 2013-11-21 22:19:38Z

2

You are using jQuery, not pure javascript. That's a good thing...

but you also must add the jQuery library in your head tags, like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

You also need to put semi-colons (or commas, as RobM has corrected me, if between var assignments) at the end of each instruction. See line 3 in your code example.

If you want your js/jQuery code in a separate file, you can load the script code like this (again, usually done in the <head> tags):

<script src="filename.js" type="text/javascript"></script>

Or, you can include the js/jQ in the <head> tags of your document, like this:

<script type="text/javascript">
    $(document).ready(function() {
        var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
        selectedColor = colors[Math.floor(Math.random()*colors.length)],
        header = $("div#background-color-random");

        header.css("background-color", selectedColor);
    });
</script>

If including the script as an external file, you leave out the <script></script> wrapper from that file.

edited Nov 21, 2013 at 22:19

answered Nov 21, 2013 at 21:54

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

9 Comments

Rob M. Over a year ago

Out of curiosity, why is it a good thing to use jQuery over plain Javascript?

Rob M. Over a year ago

Commas are valid in declaring multiple variables, they do not need to use semicolons

cssyphus Over a year ago

Automatically cross-browser compatible, for one. Plus, many find it much easier to learn and it is about 30% less typing. Many reasons.

cssyphus Over a year ago

@RobM. Aaii, you're right - I missed that. Thanks for the correction.

Rob M. Over a year ago

I think an argument could be made that performing a task as simple as this could be done in plain javascript without loading a large library; I don't necessarily disagree with you, but developers lean a little too hard on jQuery and other libraries without enough focus on understanding "plain" javascript.

|

Collectives™ on Stack Overflow

How do I load a specific javascript file or javascript code into an HTML document?

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related