1

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

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

2 回答 2

1

或多或少与您当前的方法有所不同 （在我写这篇文章时已解决。）

当您处理较大的项目时，请尽量避免使用“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);
}
于 2013-08-05T08:11:53.553 回答
1

如果它们调用的函数是全局函数，而不包含在任何范围函数中，那么你说的两个例子都不起作用。

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

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

...所以你的函数不是全局的。（我说这很令人惊讶，因为等待window load事件运行，这在页面加载过程中非常晚，并不是最佳实践。）

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

为清楚起见，这里有一个完整的多合一示例：Live Copy | 直播源

<!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>
于 2013-08-05T07:53:38.260 回答