Img onclick вызов функции JavaScript

Я пытаюсь сделать img, что при нажатии на него вызывается функция JavaScript.

Я искал в Интернете, но не нашел ничего, что действительно работает (проблема из-за ошибки, которую я сделал).

Этот код был сделан для передачи переменных JavaScript в приложение С#.

Может ли кто-нибудь сказать мне, что я делаю неправильно?

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

ОТВЕТЫ

Ответ 1

Это должно работать (с частью или частью "javascript:" ):

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

Ответ 2

Вероятно, вы должны использовать более unobtrusive. Здесь преимущества

  • Разделение функциональности ( "уровень поведения" ) на структуру/содержимое веб-страницы и презентацию
  • Рекомендации по устранению проблем, связанных с традиционным программированием на JavaScript (например, несоответствия браузерам и отсутствие масштабируемости)
  • Прогрессивное усовершенствование для поддержки пользовательских агентов, которые могут не поддерживать расширенные функции JavaScript

Здесь jsfiddle demo

Ваш 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);
  });
}

Ваши изображения будут выглядеть следующим образом

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

Ответ 3

Поместите часть javascript и конец прямо перед закрытием </body>, тогда он должен работать.

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>

Ответ 4

Хорошо, что функция onclick работает абсолютно нормально, ваша ваша линия
window.external.values(a.value, b.value, c.value, d.value, e.value);

window.external - это объект и не имеет значений имени метода

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

Ответ 5

В ответ на хорошее решение от maček. Решение не сработало для меня. Мне нужно привязать значения данных к функции экспорта. Это решение работает для меня:

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);
  }