javascript onclick 无法使用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15171008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick not working with button
提问by fuddin
I am trying to make a javascript function work on pressing search button but the function doesnt seem to run. Please guide. Fiddle.
我试图让一个 javascript 函数在按下搜索按钮时工作，但该函数似乎没有运行。请指导。小提琴。
<form action="" method="get" id="searchform" >
<input name="q" type="text" id="search" size="32" maxlength="128" class="txt"/>
<input type="submit" id="hit" value="Search" onclick="myFunction()" class="btn"/>
</form>
Heres the JS,
继承人JS，
function myFunction() {
alert("I am an alert box!");
}
回答by sourcecode
You have wrapped the function in the body, onLoad, just change it to no wrap - in <head>. See thisfiddle.
您已将函数包装在正文中onLoad，只需将其更改为 no wrap-in <head>。看到这个小提琴。
function myFunction() {
alert("I am an alert box!");
}
};
^^
You also have an extra };in your code,
你};的代码中还有一个额外的，
UPDATE:
更新：
This happens because:
发生这种情况是因为：
if the function is place inside
$(document).ready, then it can only be used within the ready callback(and in the inner objects). You can't reference it outside.but if you are placing it outside the ready function then it gets global scope, i.e. you can call it from anywhere.
如果函数位于 内部
$(document).ready，则它只能在就绪回调（以及内部对象）中使用。你不能在外面引用它。但是如果你把它放在 ready 函数之外，那么它就会获得全局作用域，即你可以从任何地方调用它。
回答by alfasin
The following works for me:
以下对我有用：
<form action="" method="get" id="searchform" >
<input name="q" type="text" id="search" size="32" maxlength="128" class="txt" >
<input type="submit" id="hit" value="Search" onclick="myFunction()" class="btn">
</form>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
but I noticed that you have a };at the end of your question - maybe that's the thing that causes a syntax error ?
但我注意到};你的问题末尾有一个- 也许这就是导致语法错误的原因？
UPDATE:
更新：
The problem was (besides the };) with the setup of your fiddler. Check thisout!
问题是（除了};）与您的提琴手的设置有关。看看这个！
回答by Niet the Dark Absol
It seems most likely to me that you have a syntax error somewhere in your JavaScript file. The reason I say this is because there's nothing that would stop the alert from appearing using the code you've shown.
在我看来，您的 JavaScript 文件中的某处很可能存在语法错误。我之所以这么说是因为没有什么可以阻止使用您显示的代码出现警报。
Check the browser's error console (F12 in IE and Chrome) and see if there are any errors, as these will stop the function from being defined.
检查浏览器的错误控制台（IE 和 Chrome 中的 F12）并查看是否有任何错误，因为这些会阻止函数被定义。
回答by Gohn67
I looked at your fiddle, it has an extra closed bracket. This should work.
我看着你的小提琴，它有一个额外的封闭支架。这应该有效。
function myFunction() {
alert("I am an alert box!");
return false;
};
Your fiddle looked like this:
你的小提琴看起来像这样：
function myFunction() {
alert("I am an alert box!");
}
};
EDIT 1:I added a return falsesince the user did not want to submit the form.
编辑 1：我添加了一个return false因为用户不想提交表单。
EDIT 2:
编辑2：
Since no one wants to explain the JS Fiddle issue, I'll take a stab it.
既然没有人想解释 JS Fiddle 问题，我就试一试。
In the original JS Fiddle, "onLoad", is used on the second dropdown on the sidebar menu.
在原始 JS Fiddle 中，“onLoad”用于侧栏菜单的第二个下拉菜单。
The reason this setting does not work is that JS Fiddle executes the javascript code in an onload function. This means that myFunction is out of scope.
此设置不起作用的原因是 JS Fiddle 在 onload 函数中执行 javascript 代码。这意味着 myFunction 超出了范围。
This is why you need to use either "No wrap - in " and "No wrap - in " options in the dropdown menu. By using those two options instead, your function myFunctionwill be in the global scope.
这就是为什么您需要在下拉菜单中使用“No wrap - in”和“No wrap -in”选项的原因。通过使用这两个选项，您的函数myFunction将在全局范围内。
I hope that clarifies things.
我希望这能澄清事情。
Edit 3
编辑 3
If you did want to use the onload event. You could add a click event handler instead and remove the onclickattribute in your submit button markup.
如果您确实想使用 onload 事件。您可以改为添加单击事件处理程序并删除onclick提交按钮标记中的属性。
In general it is probably better to set up your event handlers using javascript.
一般来说，使用 javascript 设置事件处理程序可能更好。
document.getElementById('hit').addEventListener('click', function() {
alert("I am an alert box!");
});
If you wanted to use jQuery, you could do this:
如果你想使用 jQuery，你可以这样做：
$('#hit').click(function() {
alert("I am an alert box!");
});
回答by user3038323
Put your function in try-catchblock...should work
将您的功能放在try-catch块中...应该可以工作
function myFunction() {
try {
alert("I am an alert box!");
//enter code here
return false;
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}
