单击按钮时调用多个 JavaScript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2414500/
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
Calling multiple JavaScript functions on a button click
提问by ACP
How to call multiple functions on button click event?
如何在按钮单击事件上调用多个函数？
Here is my button,
这是我的按钮，
<asp:LinkButton
ID="LbSearch"
runat="server"
CssClass="regular"
onclick="LbSearch_Click"
OnClientClick="return validateView();ShowDiv1();">
But my ShowDiv1doesn't get called...
但我的ShowDiv1没有被调用...
My JavaScript functions:
我的 JavaScript 函数：
function ShowDiv1() {
document.getElementById("ReportDiv").style.display = 'block';
return false;
}
function validateView() {
if (document.getElementById("ctl00_ContentPlaceHolder1_DLCategory").selectedIndex == 0) {
document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Category";
document.getElementById("ctl00_ContentPlaceHolder1_DLCategory").focus();
return false;
}
if (document.getElementById("ctl00_ContentPlaceHolder1_DLEmpName").selectedIndex == 0) {
document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Employee Name";
document.getElementById("ctl00_ContentPlaceHolder1_DLEmpName").focus();
return false;
}
return true;
}
If the ValidateView()function returns true I should call ShowDiv1().
如果ValidateView()函数返回 true，我应该调用ShowDiv1().
回答by John K
Because you're returning from the first method call, the second doesn't execute.
因为您从第一个方法调用返回，所以第二个方法不会执行。
Try something like
尝试类似的东西
OnClientClick="var b = validateView();ShowDiv1(); return b"
or reverse the situation,
或扭转局势，
OnClientClick="ShowDiv1();return validateView();"
or if there is a dependency of div1 on the validation routine.
或者如果 div1 依赖于验证例程。
OnClientClick="var b = validateView(); if (b) ShowDiv1(); return b"
What might be best is to encapsulate multiple inline statementsinto a mini function like so, to simplify the call:
最好的方法是将多个内联语句封装到一个像这样的小函数中，以简化调用：
// change logic to suit taste
function clicked() {
var b = validateView();
if (b)
ShowDiv1()
return b;
}
and then
进而
OnClientClick="return clicked();"
回答by raj
That's because, it gets returned after validateView();;
那是因为，它会在之后返回 validateView();;
Use this:
用这个：
OnClientClick="var ret = validateView();ShowDiv1(); return ret;"
回答by elizabeth
Try this .... I got it... onClientClick="var b=validateView();if(b) var b=ShowDiv1();return b;"
试试这个......我明白了...... onClientClick="var b=validateView();if(b) var b=ShowDiv1();return b;"
回答by Kangkan
Change
改变
OnClientClick="return validateView();ShowDiv1();">
to
到
OnClientClick="javascript: if(validateView()) ShowDiv1();">
回答by Chris Thompson
It isn't getting called because you have a return statement above it. In the following code:
它没有被调用，因为它上面有一个 return 语句。在以下代码中：
function test(){
return 1;
doStuff();
}
doStuff() will never be called. What I would suggest is writing a wrapper function
doStuff() 永远不会被调用。我的建议是编写一个包装函数
function wrapper(){
if (validateView()){
showDiv();
return true;
}
}
and then call the wrapper function from your onclickhandler.
然后从您的onclick处理程序调用包装函数。
回答by Jim Greenleaf
I think that since return validateView();will return a value (to the click event?), your second call ShowDiv1();will not get called.
我认为因为return validateView();会返回一个值（对点击事件？），你的第二次调用ShowDiv1();不会被调用。
You can always wrap multiple function calls in another function, i.e.
您始终可以将多个函数调用包装在另一个函数中，即
<asp:LinkButton OnClientClick="return display();">
function display() {
if(validateView() && ShowDiv1()) return true;
}
You also might try:
你也可以尝试：
<asp:LinkButton OnClientClick="return (validateView() && ShowDiv1());">
Though I have no idea if that would throw an exception.
虽然我不知道这是否会引发异常。
回答by perilbrain
And of course you can never call the two functions at the same time. Not any one in the world except you are working on two processors simultaneously.
当然，您永远不能同时调用这两个函数。除了您同时在两个处理器上工作之外，世界上没有任何人。
The best way is to call a JavaScript parent function and in that, specify all the sequence of function you want to call. For example,
最好的方法是调用 JavaScript 父函数，然后指定要调用的所有函数序列。例如，
function ShowDiv1() {
document.getElementById("ReportDiv").style.display = 'block';
return false;
}
function validateView()
{
if (document.getElementById("ctl00_ContentPlaceHolder1_DLCategory").selectedIndex == 0) {
document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Category";
document.getElementById("ctl00_ContentPlaceHolder1_DLCategory").focus();
return false;
}
if (document.getElementById("ctl00_ContentPlaceHolder1_DLEmpName").selectedIndex == 0) {
document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Employee Name";
document.getElementById("ctl00_ContentPlaceHolder1_DLEmpName").focus();
return false;
}
ShowDiv1();
return true;
}
回答by Gaurav Tailor
if there are more than 2 js function then following two ways can also be implemented:
如果js函数多于2个，那么也可以实现以下两种方式：
if you have more than two functions you can group them in if condition
OR
you can write two different if conditions.
如果你有两个以上的函数，你可以在 if 条件下将它们分组
或者
你可以写两个不同的 if 条件。
1 OnClientClick="var b = validateView(); if (b) ShowDiv1(); if(b) testfunction(); return b">
1 OnClientClick="var b = validateView(); if (b) ShowDiv1(); if(b) testfunction(); return b">
OR
或者
2 OnClientClick="var b = validateView(); if(b) {
2 OnClientClick="var b = validateView(); if(b) {
ShowDiv1();
ShowDiv1();
testfunction();
测试功能（）；
} return b">
}返回b>
回答by sana
At times it gives syntax error that "return is not a function" so in that case just remove return and it will work fine :) as shown below
有时它会给出“return 不是函数”的语法错误，因此在这种情况下，只需删除 return 即可正常工作:)，如下所示
OnClientClick="var b = validateView(); if(b) var b = ShowDiv1(); b;"
回答by Hrushi
<asp:Button ID="btnSubmit" runat="server" OnClientClick ="showDiv()"
OnClick="btnImport_Click" Text="Upload" ></asp:Button>
