img onclick call to JavaScript function

Question

I am trying to make a img that when it is clicked a JavaScript function is called   I have searched on the web but haven t found anything that actually works  prob because of a mistake I made    This code was made to pass JavaScript variables to a c  application   Can anybody tell me what I am doing wrong      lt script type  text javascript  gt        function exportToForm a b c d e              window external values a value  b value  c value  d value  e value              lt  script gt   lt  head gt   lt body gt     lt img onclick  exportToForm  1 6   55   10   50   1     src  China-Flag-256 png   gt     lt button onclick  exportToForm  1 6   55   10   50   1     style  background-color   00FFFF  gt Export lt  button gt   lt  body gt

User · Accepted Answer

This should work with or without  javascript   part         lt img onclick  javascript exportToForm  1 6   55   10   50   1    src  China-Flag-256 png    gt   lt script gt  function exportToForm a  b  c  d  e         alert a  b       lt  script gt

User · Answer

You should probably be using a more unobtrusive approach  Here s the benefits        Separation of functionality  the  behavior layer   from a Web page s structure content and presentation   Best practices to avoid the problems of traditional JavaScript programming  such as browser inconsistencies and lack of scalability    Progressive enhancement to support user agents that may not support advanced JavaScript functionality      Here s a jsfiddle demo  Your JavaScript  function exportToForm a  b  c  d  e      console log a  b  c  d  e      var images   document getElementsByTagName  img     for  var i 0  len images length  img  i lt len  i        img   images i     img addEventListener  click   function         var a   img getAttribute  data-a            b   img getAttribute  data-b            c   img getAttribute  data-c            d   img getAttribute  data-d            e   img getAttribute  data-e         exportToForm a  b  c  d  e             Your images will look like this   lt img data-a  1  data-b  2  data-c  3  data-d  4  data-e  5  src  image jpg  gt

User · Answer

In response to the good solution from macek  The solution didn t work for me  I have to bind the values of the datas to the export function  This solution works for me   function exportToForm a  b  c  d  e      console log a  b  c  d  e      var images   document getElementsByTagName  img     for  var i 0  len images length  img  i lt len  i        var img   images i     var boundExportToForm   exportToForm bind undefined             img getAttribute  data-a                 img getAttribute  data-b                img getAttribute  data-c                img getAttribute  data-d                img getAttribute  data-e       img addEventListener  click   boundExportToForm

User · Answer

Well your onclick function works absolutely fine its your this line window external values a value  b value  c value  d value  e value    window external is object and has no method name values   lt html gt       lt head gt        lt script type  text javascript  gt            function exportToForm a b c d e                    window external values a value  b value  c value  d value  e value               use alert to check its working           alert  HELLO             lt  script gt       lt  head gt       lt body gt         lt img onclick  exportToForm  1 6   55   10   50   1     src  China-Flag-256 png   gt         lt button onclick  exportToForm  1 6   55   10   50   1     style  background-color   00FFFF  gt Export lt  button gt       lt  body gt        lt  html gt

User · Answer

Put the javascript part and the end right before the closing  lt  body gt  then it should work   http   jsfiddle net Q3Zy3 1      lt img onclick  exportToForm  1 6   55   10   50   1     src  China-Flag-256 png   gt     lt button onclick  exportToForm  1 6   55   10   50   1     style  background-color   00FFFF  gt Export lt  button gt      lt script type  text javascript  gt        function exportToForm a b c d e          alert a   b         window external values a value  b value  c value  d value  e value        lt  script gt

[javascript] img onclick call to JavaScript function

Examples related to javascript

Examples related to html