Question

我想动态创建\删除文本框。我有一个代码。我有两个文件。一个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来获取撰写电子邮件中的值因为它从html页面的文本框ID获取值。请帮忙。

Answer 1

如果您只是将代码移动到另一个文件，那么您基本上将这些内容从中间脚本标记中提取到新文件中，然后将脚本标记更新为： <script type="text/javascript" src="newfile.js"> /* stuff here was moved to the new file*/ </script>

如果您还想使该功能适用于任何文本框，请将声明更新为

function addElement(elementId)

然后在获取元素时使用它代替硬编码字符串。

Answer 2

如果要从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>

动态创建\删除文本框

2 个答案: