Question

我正在尝试制作一个img，当它被点击时，会调用一个JavaScript函数。

我在网上搜索过但没有找到任何实际可行的内容（因为我犯了错误而无法解决）。

此代码用于将JavaScript变量传递给c＃应用程序。

有谁能告诉我我做错了什么？

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

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

Answer 2

您应该使用更多unobtrusive方法。这是好处

从网页的结构/内容和呈现中分离功能（“行为层”）

避免传统JavaScript编程问题的最佳实践（例如浏览器不一致和缺乏可伸缩性）

支持可能不支持高级JavaScript功能的用户代理的渐进增强

Here's a 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">

Answer 3

在结束</body>之前放置javascript部分和结尾，然后它应该有效。

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>

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

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

img onclick调用JavaScript函数

5 个答案: