Question

我正在尝试在单击图像时将变量发送到函数，但无法使其中的任何一个工作。不知道我哪里出错了。？

jsfiddle http://jsfiddle.net/cibravo/rNGMR/

HTML

<input type="submit" value="send" onclick="alert('works')" />
<br/><br/>

<img onclick="alert('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />

<br/><br/>
<!-- this doesn't work -->
<input type="button" value="send" onclick="myFunction()" />
<br/><br/>
<!-- this doesn't work -->
<img onclick="showhide('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />

JS

function myFunction(){
    alert("works");
}

function showhide(field){
    alert(field);
}

Answer 1

您说的两个示例都不起作用提供它们调用的函数是全局变量，不包含在任何作用域函数中。

它不适合你的小提琴的原因是jsFiddle的（令人惊讶的）默认是将你的JavaScript代码包装在window load事件处理程序中，如下所示：

window.onload = function() {
    // your code here
};

...所以你的函数不是全局的。（我说这是令人惊讶的，因为等到window load事件运行，这在页面加载过程中已经很晚了，这不是最佳做法。）

这是一个更新的小提琴：http://jsfiddle.net/rNGMR/4/正如Juhana指出的那样，你将左上角的第二个下拉框更改为“无包装”选项之一（我选择了“没有换身 - 身体”）

为清楚起见，这是一个完整的一体化示例：Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Global Functions</title>
</head>
<body>
<input type="submit" value="send" onclick="alert('works')" />
<br/><br/>

<img onclick="alert('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />

<br/><br/>
<!-- this doesn't work -->
<input type="button" value="send" onclick="myFunction()" />
<br/><br/>
<!-- this doesn't work -->
<img onclick="showhide('works')" src="http://firmakurser.studieskolen.dk/images/web/Facebook-logo-small.png" />
<script>
// Note that these are globals
function myFunction(){
    alert("works");
}

function showhide(field){
    alert(field);
}
</script>
</body>
</html>

Answer 2

或多或少是您当前方法的替代 （这是我写这篇文章时解决的。）

当您处理更大的项目时，请尝试避免使用'onclick'事件。保持HTML，CSS和JavaScript模块化分离通常会更好。

当我遇到这样的问题时，我通常使用匿名函数，然后调用它使用正确的参数进行操作。

这项技术还解决了一切都需要全局化的问题 - 这也是不鼓励的。

在过去的3年中，它非常适合我，大约有15k行JavaScript代码。

这是一个例子： http://jsfiddle.net/8jSaT/1/

<!-- HTML -->
<img id="btnSomething" src="http://firmakurser.studieskolen.dk/...">

// (plain) Javascript 
var btn = document.getElementById('btnSomething');

// this is where the anonymous function comes in:
// Its only purpose is to redirect the onClick-Event
// and serve proper parameters
var btn.onclick = function() { showhide('works'); };

// Your code
////////////////
function myFunction(){
  alert("works");
}

function showhide(field){
  alert(field);
}

通过javascript将变量发送到函数

2 个答案: