"onClick" on external .js file

Question

I'm new to Javascript and I'm triyng to perform an onClick event on an image in a external .js file using the html tag

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

The code inside "embed.js" is the following

var image1=new Image();
image1.src="img.gif"
document.write('<IMG src='+image1.src+'>');


$(document).ready( function()
{
 $(image1).click( function()
{
    alert("Hello World");
    });
});

As you can see, I'd like to show an alert when somebody click on the image, but the code I've posted doesn't work. Could you help me? Thanks! :)

@JD it the html code is

<html>
<head>
    <title></title>

</head>

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


</html>

= new Image() is your problem here.. it should be a selector.. $('#image1') maybe? post your html./ — JF it
– JF it, Commented Apr 8, 2014 at 16:47
@JFit: OP wants to create an image and add a listener, not add a listener to an existing image. — rvighne
– rvighne, Commented Apr 8, 2014 at 16:49

rvighne · Accepted Answer · 2014-04-08 16:59:43Z

2

The image that you attach the onclick to and the image that you put on the page are not the same.

Explanation: The string that you pass to document.write is parsed by the browser to create a new image element (albeit one that has the same src) while image1 is a different image instance that is only in memory (not on the page), but it has the event listener.

To fix, replace

document.write('<IMG src='+image1.src+'>');

with

document.body.appendChild(image1);

Now you're dealing with only one image, which gets put on the page and the event listener.

edited Apr 8, 2014 at 16:59

answered Apr 8, 2014 at 16:45

rvighne

22.1k11 gold badges53 silver badges75 bronze badges

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

Comments

Conroid · Accepted Answer · 2014-04-08 17:14:33Z

0

All the answers are correct

but you can insert the "image1" object directly in the DOM.

Something like this:

$(document).ready( function(){
    // Take care with the scope of image1

    var image1 = $("<img/>").attr("src","img.gif").appendTo("parentElementInDOMselector");

    image1.click( function(){
        alert("Hello World");
    });

});

You can use appendTo, preppendTo, or functions like html(); replace(); etc...

answered Apr 8, 2014 at 17:14

Conroid

665 bronze badges

Comments

Aboba · Accepted Answer · 2014-04-08 16:47:58Z

-1

Your selections are off, try:

$("document").ready( function()
{
 $("#image1").click( function()
{
    alert("Hello World");
    });
});

and add an id to the image tag

<img id='image1' ...

JS fiddle http://jsfiddle.net/YS95J/

answered Apr 8, 2014 at 16:47

Aboba

2861 silver badge10 bronze badges

1 Comment

rvighne Over a year ago

The OP wants to create an image and add a listener, not add a listener to an existing image.

Collectives™ on Stack Overflow

"onClick" on external .js file

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related