Simple yet lost: Embeding Javascript into HTML

Question

All I want to do is use this code: jsfiddle for an un-clickable button but I cant seem to embed the JS the way that i'm used to. I feel my problem is telling it what the img is. this is what i have.

<html>
<head>
    <script>
    jQuery(function($) {
    $('#img').mouseover(function() {
        var dWidth = $(document).width() - 100, // 100 = image width
            dHeight = $(document).height() - 100, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
   </script>
</head>
<body>
    <div class="top">
        <p>Yada yada yada.<p>
    </div>
        <img src="poop.png" width="100" height="100" alt="Grey Square" id="img" />
</body>
</html>

is this not java? I thoguht it was java... As it stands Im only literate in HTML and CSS. — newby JP
– newby JP, Commented Apr 25, 2014 at 0:54
You tagged it as both javascript and java — but Java and Javascript are almost completely unrelated. — Erik Kaplun
– Erik Kaplun, Commented Apr 25, 2014 at 0:56
@newbyJP "Java is to JavaScript such as Car is to Carpet" ;) — Mathieu Guindon
– Mathieu Guindon, Commented Apr 25, 2014 at 0:57
my apologize, I had no idea there was a different, but that is a great simile explanation. — newby JP
– newby JP, Commented Apr 25, 2014 at 1:03

Erik Kaplun · Accepted Answer · 2014-04-25 01:36:58Z

2

You seem to be missing a few closing brackets and the part that loads jQuery itself:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
$(function() {
    $('#img').mouseover(function() {
        var dWidth = $(document).width() - 100, // 100 = image width
            dHeight = $(document).height() - 100, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });   /// HERE
});   /// AND HERE
</script>

I suggest before learning jQuery, you should learn Javascript — surprisingly, and contrary to popular belief, those two are actually not the same thing!

Also, you need to pay attention to the error console of the browser; if you did, you'd have noticed the syntax error caused by the missing closing brackets.

edited Apr 25, 2014 at 1:36

answered Apr 25, 2014 at 0:56

Erik Kaplun

38.5k15 gold badges102 silver badges113 bronze badges

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

8 Comments

newby JP Over a year ago

Your right i did remove those on accident in other failed attempts, but this did not make my image move.

Erik Kaplun Over a year ago

sorry; I actually also missed one bracket — edited; try again.

newby JP Over a year ago

ReferenceError: jQuery is not defined calc.html:23 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Erik Kaplun Over a year ago

OK, I realized you weren't even loading jQuery itself to begin with... see my updated answer.

newby JP Over a year ago

I know i'm not suposed to say thanks based on the thing but... thanks a bunch you guys were a bunch of life savers.

|

Alon Dahari · Accepted Answer · 2014-04-25 01:51:19Z

1

You're using a JavaScript library called jQuery. This is a resource you need to include in your page. before </body>, write:
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
Explore this for more info.

edited Apr 25, 2014 at 1:51

answered Apr 25, 2014 at 1:07

Alon Dahari

1,1571 gold badge10 silver badges27 bronze badges

6 Comments

newby JP Over a year ago

i had high hopes for this one, but it still sits stagnently on the page. :{

Erik Kaplun Over a year ago

I think the point of the jQuery(...) call is exactly to have the code executed after the page has loaded.

Alon Dahari Over a year ago

Oh yeah, I missed that because I'm not used to that signature. Anyway, @newby, did you include jQuery in your code?

newby JP Over a year ago

@climbinghobo I posted the entirety of my page without all the added visible text. i'm not sure what you mean by "did i included..." but my gut says very strongly "i think??"

Alon Dahari Over a year ago

You're using a JavaScript library called jQuery. This is a resource you need to include in your page. before </body>, write: <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> Explore this for more info.

|

Collectives™ on Stack Overflow

Simple yet lost: Embeding Javascript into HTML

2 Answers 2

8 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related