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?

  <script type="text/javascript">
      function exportToForm(a,b,c,d,e) {
          window.external.values(a.value, b.value, c.value, d.value, e.value);
      }
  </script>
</head>
<body>
  <img onclick="exportToForm('1.6','55','10','50','1');" src="China-Flag-256.png"/>
  <button onclick="exportToForm('1.6','55','10','50','1');" style="background-color: #00FFFF">Export</button>
</body>

What is it about your code that is not working? Can you elaborate? — MD Sayem Ahmed
– MD Sayem Ahmed, Commented Nov 20, 2013 at 8:04
Place your javascript code in <script type="text/javascript"> tag — Murali Mopuru
– Murali Mopuru, Commented Nov 20, 2013 at 8:05
Look in the JavaScript error console and tell what errors you see there and which lines they point to. — JJJ
– JJJ, Commented Nov 20, 2013 at 8:05
window.external.values(a.value, b.value, c.value, d.value, e.value); Here, a.value is wrong. a is string which don't have value atribue And, make sure 'values' function exist — Murali Mopuru
– Murali Mopuru, Commented Nov 20, 2013 at 8:19

Feanor · Accepted Answer · 2013-11-20 08:07:08Z

41

This should work(with or without 'javascript:' part):

<img onclick="javascript:exportToForm('1.6','55','10','50','1')" src="China-Flag-256.png" />
<script>
function exportToForm(a, b, c, d, e) {
     alert(a, b);
 }
</script>

answered Nov 20, 2013 at 8:07

Feanor

3,7005 gold badges32 silver badges51 bronze badges

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

3 Comments

Robin Over a year ago

needed to wait for it to be possible

antf Over a year ago

does it matter if the script is before or after the img?

Feanor Over a year ago

It is better to place the script before the </body> tag or as close to it as possible. You can test in jsfiddle to place it before and after img tag. jsfiddle.net

maček · Accepted Answer · 2013-11-20 08:21:11Z

6

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

edited Nov 20, 2013 at 8:21

answered Nov 20, 2013 at 8:15

maček

78k37 gold badges172 silver badges200 bronze badges

1 Comment

ChaosSpeeder Over a year ago

I love this solution but for me it didn't work. The problem is that you've got the variable values of the latest value img. You have to bind the attribute values to the function.

caramba · Accepted Answer · 2013-11-20 08:12:06Z

1

Put the javascript part and the end right before the closing </body> then it should work.

http://jsfiddle.net/Q3Zy3/1/

  <img onclick="exportToForm('1.6','55','10','50','1');" src="China-Flag-256.png"/>
  <button onclick="exportToForm('1.6','55','10','50','1');" style="background-color: #00FFFF">Export</button>

  <script type="text/javascript">
      function exportToForm(a,b,c,d,e) {
      alert(a + b);
      window.external.values(a.value, b.value, c.value, d.value, e.value);
  }
</script>

answered Nov 20, 2013 at 8:12

caramba

22.5k20 gold badges94 silver badges134 bronze badges

Comments

Achilles · Accepted Answer · 2013-11-20 08:20:08Z

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

<html>
    <head>
     <script type="text/javascript">
          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");
}
      </script>
    </head>
    <body>
      <img onclick="exportToForm('1.6','55','10','50','1');" src="China-Flag-256.png"/>
      <button onclick="exportToForm('1.6','55','10','50','1');" style="background-color: #00FFFF">Export</button>
    </body>

    </html>

ChaosSpeeder · Accepted Answer · 2016-01-03 16:42:23Z

0

In response to the good solution from maček. 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<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);
  }

answered Jan 3, 2016 at 16:42

ChaosSpeeder

3,5385 gold badges33 silver badges39 bronze badges

Collectives™ on Stack Overflow

img onclick call to JavaScript function

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related