img onclick调用JavaScript函数
[英]img onclick call to JavaScript function
问题描述
我试图制作一个img，当它被点击时，调用一个JavaScript函数。
我在网上搜索过但没有找到任何实际可行的东西（因为我犯了一个错误，所以）。
此代码用于将JavaScript变量传递给ac＃application。
谁能告诉我我做错了什么？
<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>
5 个解决方案
解决方案1
35 已采纳 2013-11-20 08:07:08
这应该工作（有或没有'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
5 2013-11-20 08:15:20
您可能应该使用更不引人注目的方法。 这是好处
- 从网页的结构/内容和表示中分离功能（“行为层”）
- 避免传统JavaScript编程问题的最佳实践（例如浏览器不一致和缺乏可伸缩性）
- 逐步增强，以支持可能不支持高级JavaScript功能的用户代理
你的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
1 2013-11-20 08:12:06
把javascript部分和结束放在结束</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>
<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
0 2013-11-20 08:20:08
那么你的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
0 2016-01-03 16:42:23
回应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);
}
Javascript onclick 不调用 function<img>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.