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 · 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<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

<img data-a="1" data-b="2" data-c="3" data-d="4" data-e="5" src="image.jpg">

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

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

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

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