0

我想动态创建\删除文本框。我有一个代码。我有两个文件。一个 html 文件，另一个是 java 脚本文件。这是我的代码：

<html>
    <head>
        <title>Adding and Removing Text Boxes Dynamically</title>
        <script type="text/javascript">
            var intTextBox=0;
            //FUNCTION TO ADD TEXT BOX ELEMENT
            function addElement()
            {
                intTextBox = intTextBox + 1;
                var contentID = document.getElementById('content');
                var newTBDiv = document.createElement('div');
                newTBDiv.setAttribute('id','strText'+intTextBox);
                newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "'    name='" + intTextBox + "'/>";
                contentID.appendChild(newTBDiv);
            }
            //FUNCTION TO REMOVE TEXT BOX ELEMENT
            function removeElement()
            {
                if(intTextBox != 0)
                {
                    var contentID = document.getElementById('content');
                    contentID.removeChild(document.getElementById('strText'+intTextBox));
                    intTextBox = intTextBox-1;
                }
            }
        </script>
    </head>
    <body>
        <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
        <p><a href="javascript:addElement();" >Add</a> <a href="javascript:removeElement();" >Remove</a></p>
        <div id="content"></div>
    </body>
</html>

我想拆分此代码，以便可以在 javascript 中编写所有函数，并且我想在我的 html 文件中编写此文本框代码<input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";，以便我可以使用此文本框 id 在撰写电子邮件中获取值，因为它从文本框 id 中获取值html页面。请帮忙。

4

2 回答 2

0

如果您所追求的只是将代码移动到不同的文件，那么您基本上将中间脚本标签中的内容拉到一个新文件中，然后将您的脚本标签更新为： <script type="text/javascript" src="newfile.js"> /* stuff here was moved to the new file*/ </script>

如果您还想让该函数适用于任何文本框，请将声明更新为

function addElement(elementId)

然后在获取元素时使用它而不是硬编码的字符串。

于 2012-10-29T07:31:36.873 回答
0

如果script要从HTML代码中拆分，可以使用以下代码段

var intTextBox = 0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
  intTextBox = intTextBox + 1;
  var contentID = document.getElementById('content');
  var newTBDiv = document.createElement('div');
  newTBDiv.setAttribute('id', 'strText' + intTextBox);
  newTBDiv.innerHTML = "Text " + intTextBox + ": <input type='text' id='" + intTextBox + "'    name='" + intTextBox + "'/>";
  contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
  if (intTextBox != 0) {
    var contentID = document.getElementById('content');
    contentID.removeChild(document.getElementById('strText' + intTextBox));
    intTextBox = intTextBox - 1;
  }
}
<html>

<head>
  <title>Adding and Removing Text Boxes Dynamically</title>

</head>

<body>
  <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
  <p><a href="#" onclick="addElement()">Add</a> <a href="#" onclick="removeElement()">Remove</a></p>
  <div id="content"></div>
</body>

</html>

于 2020-01-22T15:18:28.903 回答