Question

免责声明：我不是在寻找有人为我编写代码来帮助我解决这个问题：）

我有以下网页，允许我动态地向表单添加字段。当前页面有效。我想要做的是弄清楚如何使页面底部的javascript更通用。示例我想将模板ID和目标ID传递给函数，而不将模板编号和目标ID硬编码到脚本中。这是我的代码并且工作得很好。

我想使更多字段功能，以便我可以重用。我想传递给模板和目标的功能。示例函数moreFields（模板，目标）。这样我可以使用相同的功能而无需在不同的网页中反复编辑。如果您查看moreFields函数，您将看到它是“readroot”和“writeroot”的硬编码我想要更改函数，因此它将采用参数并执行与现在相同的操作。

<HTML>
<HEAD>
<META NAME="generator" CONTENT=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">


  <TITLE></TITLE>
  <STYLE TYPE="text/css">
div.c1 {display: none}
  </STYLE>
</HEAD>

<BODY >

  <DIV ID="readroot" CLASS="c1">
    Variable Name <INPUT NAME="VarName"><BR>

  </DIV>

  <FORM METHOD="post" ACTION="/cgi-bin/show_params.cgi">

    Function Name: <INPUT NAME="CFunction">&nbsp;<BR>


   Function Alias: <INPUT NAME="AFunction"><BR>
    <BR>
    <SPAN ID="writeroot"></SPAN> 
    Function return: <INPUT NAME="AFunction"><BR>

   <INPUT TYPE="button" ID="AddMoreFields" VALUE="Give me more fields!" ONCLICK= "moreFields()"> <INPUT TYPE="submit" VALUE="Send form">
  </FORM>
<SCRIPT >      
var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById("readroot").cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
    var theName = newField[i].name
    if (theName)
        newField[i].name = theName + counter;
}
var insertHere = document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
}
  window.onload = moreFields()
  </SCRIPT>
</BODY>
</HTML>

javascript将函数转换为通用形式

0 个答案: