How do I add a click event to an image

Question

I have a script that places an image based on a mouse click thanks to Jose Faeti  Now I need help adding a  click   event to the code below so that when a user clicks the image it performs the function shown in the script    lt img src  http   soulsnatcher bplaced net LDRYh jpg  alt  unfinished bingo card    gt  click     I put the entire code below  in case you want to see it    lt html gt   lt head gt    lt script language  javascript  type  text javascript  gt    lt  --   document getElementById  foo   addEventListener  click   function  e     var img   document createElement  img     img setAttribute  src    http   blog stackoverflow com wp-content uploads stackoverflow-logo-300 png     e target appendChild img             -- gt    lt  script gt    lt  head gt    lt body gt   lt img src  http   soulsnatcher bplaced net LDRYh jpg  alt  unfinished bingo card    gt  click    lt  body gt   lt  html gt    Help

User · Answer

Enclose  lt img gt  in  lt a gt  tag    lt a href  http   www google com pk  gt  lt img src  smiley gif  gt  lt  a gt    it will open link on same tab  and if you want to open link on new tab then use target   blank    lt a href  http   www google com pk  target   blank  gt  lt img src  smiley gif  gt  lt  a gt

User · Answer

You can t bind an event to the element before it exists  so you should do it in the onload event    lt html gt   lt head gt   lt script type  text javascript  gt   window onload   function        document getElementById  foo   addEventListener  click   function  e        var img   document createElement  img        img setAttribute  src    http   blog stackoverflow com wp-content uploads stackoverflow-logo-300 png        e target appendChild img               lt  script gt   lt  head gt   lt body gt   lt img id  foo  src  http   soulsnatcher bplaced net LDRYh jpg  alt  unfinished bingo card    gt   lt  body gt   lt  html gt

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 8 2 jquery js  gt  lt  script gt    lt script type  text javascript  src  jquery-2 1 0 js  gt  lt  script gt    lt script type  text javascript   gt  function openOnImageClick       alert  Jai Sh Raam       document getElementById  images   src    fruits jpg    var img   document createElement  img     img setAttribute  src    tiger jpg      img setAttribute  width    200       img setAttribute  height    150      document getElementById  images   appendChild img          lt  script gt   lt  head gt   lt body gt    lt h1 gt Screen Shot View lt  h1 gt   lt p gt Click the Tiger to display the Image lt  p gt    lt div id  images   gt   lt  div gt    lt img src  tiger jpg  width  100  height  50  alt  unfinished bingo card  onclick  openOnImageClick      gt   lt img src  Logo1 jpg  width  100  height  50  alt  unfinished bingo card  onclick  openOnImageClick      gt    lt  body gt   lt  html gt

User · Answer

First of all  this line   lt img src  http   soulsnatcher bplaced net LDRYh jpg  alt  unfinished bingo card    gt  click     You re mixing HTML and JavaScript  It doesn t work like that  Get rid of the  click   there   If you read the JavaScript you ve got there  document getElementById  foo   it s looking for an HTML element with an ID of foo  You don t have one  Give your image that ID    lt img id  foo  src  http   soulsnatcher bplaced net LDRYh jpg  alt  unfinished bingo card    gt    Alternatively  you could throw the JS in a function and put an onclick in your HTML    lt img src  http   soulsnatcher bplaced net LDRYh jpg  alt  unfinished bingo card  onclick  myfunction      gt    I suggest you do some reading up on JavaScript and HTML though     The others are right about needing to move the  lt img gt  above the JS click binding too

[javascript] How do I add a .click() event to an image?

Examples related to javascript

Examples related to events

Examples related to mouseevent