如何在单个按钮单击或事件上执行两个任务

Question

我有一个点击它的按钮，它通过调用函数 incrementIndex 来增加计数值。但我也想为同一事件添加一个字符串到数组列表中。 下面提供了一个简单的代码 sn-p。

Java 脚本

var count=0;
function incrementIndex() {
count += 1;
}

数组列表

<%
ArrayList arr= new ArrayList();
String ele="3,2";
%>

按钮：

<button onclick="incrementIndex()">Button 1</button>

Answer 1

在增量函数结束时调用 sring 函数。

$(function(){
   $(#button").click(function(){
  incrementIndex();  //this will call the increment function
 arr.add(ele);  //this will call the method add to arr passing it ele.
});
 });

或类似的东西

$(function(){
   $(#button").click(function(){
   $("#").increment();//what ever your incrementing function is
   $.get("ServerResponce.asp"), function( data ) { // call controller or server action
   $( ".result" ).html( data );
});
});
});

Answer 2

要让一个按钮单击调用另外两个任务（或其他），只需将其他任务嵌套到绑定到 onclick 的函数中

所以而不是：

<button onclick="incrementIndex()">Button 1</button>

你将拥有

<button onclick="increment_and_add_string()">Button 1</button>

那么你需要有这个代码

function increment_and_add_string(){
     incrementIndex();  //this will call the increment function
     arr.add(ele);  //this will call the method add to arr passing it ele.
}

显然，您会遇到一些范围界定问题，而且如果不更深入地了解您从哪里获得arr 和ele，我将无能为力。但要点是您调用了一个执行多项任务的函数，并将其绑定到按钮单击事件。

Answer 3

您可以拥有一个运行所有其他函数的处理函数。

<button onclick="handleButton1Click()">Button 1</button>

<script>
var count = 0,
    stringList = [];

function incrementIndex() {

  count += 1;
}

function addString(string) {

  stringList.push(string)
}

function handleButton1Click(e) {

  addString(e.someEventProperty);
  incrementIndex();
}

</script>

Answer 4

You have to first understand how jsp is presented to the user in browser. Whatever is shown to the user in the browser is just html and javascript, having said this whatever java code you  have written in jsp is compiled and processed in JVM itself thus no java variable will be available to the end user in browser for further updation, on the contrary javascript runs in browser so you can do whatever you want with the help of javasscript in browser. 

Now coming to your problem, you have a List in java so its reference won't be available to you in browser so what you can do is you can have a javascript list and assign the java List to it. Now you will have an access to javascript list in the browser, do whatever you want to do with it as add/substract/concat etc and while submitting form, submit the value of that javascript list too in some hidden field and finally in your servlet/controller class you will have latest list using which prepare final updated java List.

Let say you java list is as below:

 <%
    List<Object> javaObjList = new ArrayList<Object>();
 %>

In your jsp assign it to java script variable as below
<script>
 var jsObjList = <%= javaObjList.toArrays()%>
</script>

Have some hidden field in you form as below:

<input type="hidden" name="finalList" id="finalListId"/>

Before form submission call a function which will do as follow:
<script>
function preSubmissionProcessing() {
   document.getElementById("finalListId").val = jsObjList; 
   // make sure jsObjList  is in scope so that accessible to this method
}
</script>

That's it