动态定义硬编码的Javascript函数 [英] Defining a hardcoded Javascript function dynamically

问题描述

我正在编写一个数据库应用程序的Web前端。我在html中有几个函数调用，比如：

 < input type = button value =Set 1id = btn1onClick = edit_entry（this，edit，title）> 
< input type = button value =Set 2id =btn2onClick = edit_entry（this，edit，name）> 
< input type = button value =Set 3id =btn3onClick = edit_entry（this，edit，gender）> 
 
 function edit_entry（src，action，arg1）{
 alert（src.onclick）; 
 src.onclick = function（）{edit_entry（src，action，arg1）; 
 alert（src.onclick）; 
} 
  

点击btn1时，第一个警报返回硬编码函数定义：函数onclick（event）{edit_entry（this，edit ，title）}

但是，第二个警报返回函数定义的变量 function onclick（event） {edit_entry（src，action，arg1）}

所以当这些变量稍后改变时，函数会得到错误的值。变量的内容而不是变量本身，以便定义再一次函数onclick（event）{edit_entry（this，edit，title）}



---

这是我所指的代码，我希望现在这一切都更有意义。不便之处。

HTML正文：

 <输入类型=buttonvalue =Editid =group_1_button_editclass =action_elementonClick = edit_entries（this，edit，artnr，artalt，bez1，bez2，bez3）> ; 
< input type =buttonvalue =Editid =group_9_button_editclass =action_elementonClick = edit_entries（this，edit，dok1，dok2，dok3 dok4\" ， DOK5）> 
  

edit后面的值是将从中读取内容的输入文本框的ID。

  function edit_entries（caller，action，opt1，opt2，opt3，opt4，opt5，opt6，opt7，opt8，opt9，opt10， opt11，opt12）{
 
 caller_id = caller.id.split（_）; 
 id = caller_id [1]; 
 
 switch（action）{
 caseedit：
 
 //使文本框可写入以更改值
 // [...] 
 
 document.getElementById（group _+ id +_ button_edit）。value =Save; onclick = function（）{edit_entries（this，save，opt1，opt2，opt3，opt4，opt5，opt6，opt7，opt8，opt9， opt10，OPT11，opt12）; }; 
休息; 
 casesave：
 if（confirm（Datensatz wirklich aktualisieren？））{
 artnr_key = XML_OBJ.getElementsByTagName（artnr）[0] .textContent; 
 
 string =; 
 //构建AJAX请求字符串：textbox id = value 
 url ='mysql_req_n1.php？type = edit_entries&'+ string; 
 send_request（url）; 
} 
 break; 
 
 
 
 //由AJAX处理程序调用
函数edit_entries_unlock（）{
 
 //通过值检查获取id 
 counter_a = 1; 
 while（counter_a <= 9）{
 if（document.getElementById（group _+ counter_a +_ button_edit）。value ==Save）id = counter_a; 
 counter_a ++; 
} 
 
 
 //获取位于AJAX响应中的文本框ID 
 opts = XML_OBJ.getElementsByTagName（opts）[0] .textContent; 
 options = opts.split（，）; 
 
 //使文本框再次只读
 // [...] 
 
 document.getElementById（group _+ id +_ button_edit）。value =编辑; 
 document.getElementById（group _+ id +_ button_edit）。onclick = function（）{edit_entries（this，edit，options [0]，options [1]，options [2]，options [3 ]，选择[4]，项[5]，选择[6]，选择[7]，内容[8]，选择[9]，选择[10]，选择[11]）; }; 
 
} 
  

这就是发生的情况：

我点击第一个按钮（group_1_button_edit）。它跳转到编辑开关块，使文本框可写，并将编辑按钮更改为保存按钮。工作正常。

我点击保存。开关块save构建请求字符串并启动ajax请求。

当响应出现时，ajax处理程序启动edit_entries_unlock（）。部分XML响应是我之前使用过的文本框ID。 onclick函数再次被改变为具有来自XML对象的对应文本框ID的编辑功能。

现在我点击第二个按钮group_9_button_edit。一切都像上面提到的那样工作。没问题。

但是现在错误：我再次点击第一个按钮group_1_button_edit，它现在使用已更改功能定义。它启动开关块编辑，但与GROUP 9（我之前编辑）的文本框ID的值，而不是GROUP 1。

我猜它有东西处理变量opt1-opt12。它们总是包含最后一个edit_entries_unlock（）运行的值。由于所有已编辑的函数定义都使用opt1-opt12，所以他们从最后一次运行的值开始，而不是重新创建函数定义时使用的值。

出于这个原因，我问了如何在函数创建过程中用变量的内容来构建一个函数定义，而不是执行过程中的内容。

我希望能够现在更有意义了。对于文本墙来说很抱歉。

解决方案

这是一种传递数据的非常糟糕的方式。

您应该避免使用内嵌代码

 < input type = button value =Set 1id =btn1onClick = edit_entry（this，edit，title）> 
< input type = button value =Set 2id =btn2onClick = edit_entry（this，edit，name）> 
< input type = button value =Set 3id =btn3onClick = edit_entry（this，edit，gender）> 
  

应该是

 < input type = button value =Set 1id =btn1data-field-name =title> 
< input type = button value =Set 2id =btn2data-field-name =name> 
< input type = button value =Set 3id =btn3data-field-name =gender> 
< script> 
（function（）{//或在加载事件上使用
 
 //定义点击函数
 var clickFunction = function（event）{
 //获取元素数据
 var fieldName = event.target.attributes [data-field-name]。value; 
 //做你需要做的事情..... 
} 
 
 //查询DOM以获取您之后的元素
 var el = document.getElementsByTagName（input）; 
 
 //遍历它们并添加
 for（var i = 0; i< el.length; i ++）{
 el [i] .addEventListener（click，clickFunction，false）; 
 } 
}）（）; 
< / script> 
  

至于你在给出的例子中想要做什么，我不知道，所以也许这会帮助你。

I am programming a web frontend for a database application. I have several function calls in the html body, like:

<input type=button value="Set 1" id="btn1" onClick=edit_entry(this,"edit","title")>
<input type=button value="Set 2" id="btn2" onClick=edit_entry(this,"edit","name")>
<input type=button value="Set 3" id="btn3" onClick=edit_entry(this,"edit","gender")>

function edit_entry(src, action, arg1) {
  alert(src.onclick);
  src.onclick = function () { edit_entry( src, action, arg1 };
  alert(src.onclick);
}

When clicked on "btn1", the first alert returns the hardcoded function definition: function onclick(event) { edit_entry(this,"edit","title") }

But the second alert returns the function definition with variables function onclick(event) { edit_entry(src, action, arg1) }

So when these variables change later the function does get the wrong values. How can I apply the content of the variables to the function definition instead of the variables itself so that the definition is again function onclick(event) { edit_entry(this,"edit","title") } ?

P.S.: I know that this code snippet makes no sense as it shall only describe my problem as simple as possible.

---

Here is my code I was referring to. I hope this all makes more sense now. Sorry for the inconvenience.

HTML Body:

<input type="button" value="Edit" id="group_1_button_edit" class="action_element" onClick=edit_entries(this,"edit","artnr","artalt","bez1","bez2","bez3")>
<input type="button" value="Edit" id="group_9_button_edit" class="action_element" onClick=edit_entries(this,"edit","dok1","dok2","dok3","dok4","dok5")>

The values behind "edit" are the IDs of the input textboxes the content will be read from.

function edit_entries(caller,action,opt1,opt2,opt3,opt4,opt5,opt6,opt7,opt8,opt9,opt10,opt11,opt12) {

caller_id = caller.id.split("_");
id = caller_id[1];

switch(action) {
    case "edit":

        //Making textboxes writeable for changing values
        //[...]

        document.getElementById("group_"+id+"_button_edit").value="Save";
        document.getElementById("group_"+id+"_button_edit").onclick=function(){ edit_entries(this,"save",opt1,opt2,opt3,opt4,opt5,opt6,opt7,opt8,opt9,opt10,opt11,opt12); };
    break;
    case "save":
        if (confirm("Datensatz wirklich aktualisieren?")) {
            artnr_key = XML_OBJ.getElementsByTagName("artnr")[0].textContent;

            string = "";
            //Building the AJAX Request String: textbox id = value
            url = 'mysql_req_n1.php?type=edit_entries&'+string;
            send_request(url);
        }
    break;
}
}

//called by AJAX handler
function edit_entries_unlock() {

//Getting "id" by value check
counter_a = 1;
while (counter_a <= 9) {
    if (document.getElementById("group_"+counter_a+"_button_edit").value == "Save") id = counter_a;
    counter_a++;
}


//Getting textbox IDs located in the AJAX response
opts = XML_OBJ.getElementsByTagName("opts")[0].textContent;
options = opts.split(",");

//Making textboxes readonly again
//[...]

document.getElementById("group_"+id+"_button_edit").value="Edit";
document.getElementById("group_"+id+"_button_edit").onclick=function(){ edit_entries(this,"edit",options[0],options[1],options[2],options[3],options[4],options[5],options[6],options[7],options[8],options[9],options[10],options[11]); };

}

And that is what happens:

I click on the first button (group_1_button_edit). It jumps to the switch block "edit" making the textboxes writable and changing the edit button to a save button. Works fine.

I click on save. The switch block "save" builds the request string and starts the ajax request.

The ajax handler starts edit_entries_unlock() when the response is there. Part of the XML Response are the textbox IDs I have used before. The onclick function gets changed again to an "edit" function with the corresponding textbox IDs from the XML object.

Now I click on the second button "group_9_button_edit". Everything is working like mentioned above. No problems. The textboxes of group 9 unlock, get saved und locked again as wanted.

But now the bug: I click on the first button again "group_1_button_edit" which now uses the changed function definition. It starts the switch block "edit" but with the values of the textbox IDs of GROUP 9 (which I edited before) and not GROUP 1.

I guess it has something to do with the variables opt1-opt12. They always contain the values of the last "edit_entries_unlock()" run. And as all the edited function definitions uses opt1-opt12 as well they start with the values of the last run and not with the values I used when recreating the function definition.

For that reason I asked how to build a function definition with the content of variables during the function creation process instead of the content during the execution process.

I hope that makes a lot more sense now. Sorry for the wall of text.

解决方案

This is a very bad way to pass data.

You should avoid using inline code

<input type=button value="Set 1" id="btn1" onClick=edit_entry(this,"edit","title")>
<input type=button value="Set 2" id="btn2" onClick=edit_entry(this,"edit","name")>
<input type=button value="Set 3" id="btn3" onClick=edit_entry(this,"edit","gender")>

Should be

<input type=button value="Set 1" id="btn1" data-field-name="title">
<input type=button value="Set 2" id="btn2" data-field-name="name">
<input type=button value="Set 3" id="btn3" data-field-name="gender">
<script>
(function(){  // or use on load event

    // define the click function
    var clickFunction = function(event){  
        // get the element data
        var fieldName = event.target.attributes["data-field-name"].value;
        // do what you need to do.....
    }

    // query the DOM to get the elements you are after.
    var el = document.getElementsByTagName("input");

    // iterate them and add the event handler to each.
    for(var i = 0; i < el.length; i++){
         el[i].addEventListener("click",clickFunction,false);
    }
})();
</script>

As for what you are trying to do in the example you gave I have no clue so maybe this will help you.

这篇关于动态定义硬编码的Javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！