how to convert an html script into a .js file script

Question

would like to place the script into a .js file that opens already with

$(document).ready(function() {

    });

I have tried but it feel slike because im putting the onMouse over command into the html I don't think it will be possible?

    <head>
        <style>
            div > p {
                cursor: pointer;
            }
        </style>

        <script>
            var monkeySrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png";
            var lionSrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/lion-icon.png";
            var treeSrc = "http://totaltreeworks.co.nz/wp-content/uploads/2011/02/Tree-256x256.png";
            var falconSrc = "http://icons.iconarchive.com/icons/jonathan-rey/star-wars-vehicles/256/Millenium-Falcon-01-icon.png";

            function changeImage(src){
                document.getElementById("myImage").src = src;
            }

        </script>
    </head>

    <body>
        <div class="images">
            <img id="myImage" width="256" height="256">
        </div>

        <div>
            <p onmouseover="changeImage(monkeySrc)">Monkey are funny!</p>
        </div>

        <div>
            <p onmouseover="changeImage(lionSrc)">Lions are cool!</p>
        </div>

        <div>    
            <p onmouseover="changeImage(treeSrc)">Trees are green!</p>
        </div>

        <div>
            <p onmouseover="changeImage(falconSrc)">Falcons are fast!<p>
        </div>
    </body>
</html>

do i have to id each div and call it from the .js file instead? — alwayslearning
– alwayslearning, Commented Aug 20, 2015 at 17:24
i just want to place the script into a file .js file instead but it stops working wen placing it inside $(document).ready(function() { — alwayslearning
– alwayslearning, Commented Aug 20, 2015 at 17:33

Jamie Dixon · Accepted Answer · 2015-08-20 17:30:17Z

1

If you were to take your existing JavaScript and place it in an external file, it would work just fine. It would work because all of your variables and your function would be in the global scope.

Going one step further you'll want to move those onmouseover event handlers into the JavaScript itself.

Given a small change to your current HTML and assuming jQuery you could do something like the following:

<p data-kind="monkey">Monkey are funny!</p>

then

var urlMap = {
  monkey : 'http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png'
...
};

$('p').on('mouseover', function () {
  var kind = $(this).data('kind');
  var url = urlMap[kind];
  changeImage(url);
});

which you would then be able to wrap in the $(document).ready, the shorthand for which is just $(function () { /* The code from above here */ });

answered Aug 20, 2015 at 17:30

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

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

6 Comments

alwayslearning Over a year ago

ok, seems intresting will try it. how does this script target the div called images?

Jamie Dixon Over a year ago

This particular script calls your changeImage function that targets the images div.

alwayslearning Over a year ago

not producing the correct result. the four texts once hovered changes the image in the standalone div with the id="myimage"

Jamie Dixon Over a year ago

I've provided a pretty detailed answer but it's not a copy paste solution. You'll need to use your developer skills to get the exact result you want. Take this answer as a guide.

alwayslearning Over a year ago

is it better i learn jquery? not getting anywhere so far reading up on jquery site for functions to use targeting the myimage.

|

ryachza · Accepted Answer · 2015-08-20 17:27:50Z

0

You would need to bind the event handlers programmatically from within the .js file. jQuery would make this very simple and allow you to use arbitrary CSS selectors, but you can do the same in pure JS using e.g. document.getElementById and document.addEventListener.

answered Aug 20, 2015 at 17:27

ryachza

4,54020 silver badges28 bronze badges

Comments

maaeab · Accepted Answer · 2015-08-20 17:28:41Z

0

You can bind the function to the event using Javascript addEventListner

1- Add id attribute to each of your paragraphs tags

   <p id="p1"> .....</p>

2- Grab a variable that points to each of those

var p1 = document.getElementById('p1');

3- add event listner

p1.addEventListener("mouseover", changeImage(monkeySrc));

answered Aug 20, 2015 at 17:28

maaeab

3261 silver badge7 bronze badges

Comments

L3R5 · Accepted Answer · 2015-08-20 17:28:44Z

0

If you put your javascript code in another file and replace <script>...</script> with <script src="javascriptcodefilename.js"></script> in your HTML file, it still works as intended.

Example: http://codepen.io/anon/pen/waLqxz

answered Aug 20, 2015 at 17:28

L3R5

2082 silver badges8 bronze badges

Comments

Silvertail · Accepted Answer · 2015-08-20 18:01:16Z

0

It might be cleaner to add all of your urls to an array where the key is the name of the link, so you would have something like urls['lionSrc'] = "www.xyz.com";...

then in your changeImage function you would do document.getElementById("myImage").src = url[src];

this way you could even check to see if the image exists already, and if not, show an "image not found" icon.

answered Aug 20, 2015 at 18:01

Silvertail

1691 silver badge14 bronze badges

Collectives™ on Stack Overflow

how to convert an html script into a .js file script

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related