记录使用JavaScript动态添加文本字段的次数
我正在尝试使用JavaScript在单击链接时动态地将新文本字段添加到HTML表单中。每次单击链接，都会在我的表单中插入一个新的文本字段。以下是我执行此事件的代码： HTML 现在，我想要一种方法来记录链接被点击的次数，因为我想按名称区分每个文本字段，如下所示：记录使用JavaScript动态添加文本字段的次数,javascript,html,forms,Javascript,Html,Forms,我正在尝试使用JavaScript在单击链接时动态地将新文本字段添加到HTML表单中。每次单击链接，都会在我的表单中插入一个新的文本字段。以下是我执行此事件的代码： HTML 现在，我想要一种方法来记录链接被点击的次数，因为我想按名称区分每个文本字段，如下所示： celeb.name = "handle" + count 其中，第一次单击链接时，count将为1，因此其对应的文本字段命名为handle1。对于其他文本字段也是如此；在第一个字段之后添加的文本字段将命名为handle2，依此类推
celeb.name = "handle" + count
count1handle1handle2如何在我当前的JavaScript代码中实现这一点？如果有人能为此提供非JQuery解决方案，我将不胜感激。谢谢。定义一个全局计数器，同时调用递增计数器
<script>
function addNewCeleb(){
var celeb = document.createElement("input");
var container = document.getElementById('celebrity');
var lastNode = container.childNodes[container.childNodes.length-1] ;
var count = lastNode && lastNode.nodeName.toLowerCase() === 'input' ? parseInt(lastNode.name.replace('handle',''))+1 : 1;
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
container.appendChild(celeb);
}
</script>
<body>
<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>
</body>
函数addNewCeleb（）{
var celeb=document.createElement（“输入”）；
var container=document.getElementById（'名人'）；
var lastNode=container.childNodes[container.childNodes.length-1]；
var count=lastNode&&lastNode.nodeName.toLowerCase（）=='input'？parseInt（lastNode.name.replace（'handle'，''）+1:1；
celeb.type=“text”；
celeb.name=“handle”+计数；
celeb.placeholder=“Twitter句柄”；
容器。附属物（名人）；
}
添加一个微单元
<script>
function addNewCeleb(){
var celeb = document.createElement("input");
var container = document.getElementById('celebrity');
var lastNode = container.childNodes[container.childNodes.length-1] ;
var count = lastNode && lastNode.nodeName.toLowerCase() === 'input' ? parseInt(lastNode.name.replace('handle',''))+1 : 1;
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
container.appendChild(celeb);
}
</script>
<body>
<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>
</body>
函数addNewCeleb（）{
var celeb=document.createElement（“输入”）；
var container=document.getElementById（'名人'）；
var lastNode=container.childNodes[container.childNodes.length-1]；
var count=lastNode&&lastNode.nodeName.toLowerCase（）=='input'？parseInt（lastNode.name.replace（'handle'，''）+1:1；
celeb.type=“text”；
celeb.name=“handle”+计数；
celeb.placeholder=“Twitter句柄”；
容器。附属物（名人）；
}
添加一个微单元
<script>
function addNewCeleb(){
var celeb = document.createElement("input");
var container = document.getElementById('celebrity');
var lastNode = container.childNodes[container.childNodes.length-1] ;
var count = lastNode && lastNode.nodeName.toLowerCase() === 'input' ? parseInt(lastNode.name.replace('handle',''))+1 : 1;
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
container.appendChild(celeb);
}
</script>
<body>
<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>
</body>
函数addNewCeleb（）{
var celeb=document.createElement（“输入”）；
var container=document.getElementById（'名人'）；
var lastNode=container.childNodes[container.childNodes.length-1]；
var count=lastNode&&lastNode.nodeName.toLowerCase（）=='input'？parseInt（lastNode.name.replace（'handle'，''）+1:1；
celeb.type=“text”；
celeb.name=“handle”+计数；
celeb.placeholder=“Twitter句柄”；
容器。附属物（名人）；
}
添加一个微单元
<script>
function addNewCeleb(){
var celeb = document.createElement("input");
var container = document.getElementById('celebrity');
var lastNode = container.childNodes[container.childNodes.length-1] ;
var count = lastNode && lastNode.nodeName.toLowerCase() === 'input' ? parseInt(lastNode.name.replace('handle',''))+1 : 1;
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
container.appendChild(celeb);
}
</script>
<body>
<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>
</body>
函数addNewCeleb（）{
var celeb=document.createElement（“输入”）；
var container=document.getElementById（'名人'）；
var lastNode=container.childNodes[container.childNodes.length-1]；
var count=lastNode&&lastNode.nodeName.toLowerCase（）=='input'？parseInt（lastNode.name.replace（'handle'，''）+1:1；
celeb.type=“text”；
celeb.name=“handle”+计数；
celeb.placeholder=“Twitter句柄”；
容器。附属物（名人）；
}
添加一个微单元
var index = 0;
function addNewCeleb()
{
index += 1;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle" + index;
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
争论全局范围不是一个很好的实践是javascript，但是这可能是最简单的修复方法。替代方法是创建一个闭包。最简单的解决方案是在全局范围内创建一个变量，并在每次添加这样的新文本字段时递增它
var index = 0;
function addNewCeleb()
{
index += 1;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle" + index;
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
争论全局范围不是一个很好的实践是javascript，但是这可能是最简单的修复方法。替代方法是创建一个闭包。最简单的解决方案是在全局范围内创建一个变量，并在每次添加这样的新文本字段时递增它
var index = 0;
function addNewCeleb()
{
index += 1;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle" + index;
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
争论全局范围不是一个很好的实践是javascript，但是这可能是最简单的修复方法。替代方法是创建一个闭包。最简单的解决方案是在全局范围内创建一个变量，并在每次添加这样的新文本字段时递增它
var index = 0;
function addNewCeleb()
{
index += 1;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle" + index;
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
争论全局作用域不是一个很好的实践是javascript，但是这可能是最简单的修复方法。替代方法是创建一个闭包。您可以向创建的元素添加一个类，并计算具有该自定义类的元素数 代码应该是
function addNewCeleb()
{
var celeb = document.createElement("input");
var celebrity = document.getElementById("celebrity");
var count = document.querySelectorAll('.specific-class').length;
celeb.type = "text";
celeb.name = "handle" + count;
celeb.class = "specific-class"
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
您可以向创建的元素添加一个类，并计算具有该自定义类的元素数 代码应该是
function addNewCeleb()
{
var celeb = document.createElement("input");
var celebrity = document.getElementById("celebrity");
var count = document.querySelectorAll('.specific-class').length;
celeb.type = "text";
celeb.name = "handle" + count;
celeb.class = "specific-class"
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
您可以向创建的元素添加一个类，并计算具有该自定义类的元素数 代码应该是
function addNewCeleb()
{
var celeb = document.createElement("input");
var celebrity = document.getElementById("celebrity");
var count = document.querySelectorAll('.specific-class').length;
celeb.type = "text";
celeb.name = "handle" + count;
celeb.class = "specific-class"
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
您可以向创建的元素添加一个类，并计算具有该自定义类的元素数 代码应该是
function addNewCeleb()
{
var celeb = document.createElement("input");
var celebrity = document.getElementById("celebrity");
var count = document.querySelectorAll('.specific-class').length;
celeb.type = "text";
celeb.name = "handle" + count;
celeb.class = "specific-class"
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
保持增量变量的作用域被包含比使用全局变量更好，我建议如下：
var addNewCeleb = function() {
var count = 0;
return function() {
count++;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
document.getElementById('celebrity').appendChild(celeb);
}
}();
保持增量变量的作用域被包含比使用全局变量要好，我建议如下：
var addNewCeleb = function() {
var count = 0;
return function() {
count++;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
document.getElementById('celebrity').appendChild(celeb);
}
}();
保持增量变量的作用域被包含比使用全局变量要好，我建议如下：
var addNewCeleb = function() {
var count = 0;
return function() {
count++;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
document.getElementById('celebrity').appendChild(celeb);
}
}();
保持增量变量的作用域被包含比使用全局变量要好，我建议如下：
var addNewCeleb = function() {
var count = 0;
return function() {
count++;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle"+count;
celeb.placeholder = "Twitter handle";
document.getElementById('celebrity').appendChild(celeb);
}
}();
如果这对您有效，请尝试
<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>
function addNewText()
{
var index=0;
return function(){
index += 1;
var celeb = document.createElement("input");
celeb.type = "text";
celeb.name = "handle" + index;
celeb.placeholder = "Twitter handle";
celebrity.appendChild(celeb);
}
}
var addNewCeleb= new addNewText();
添加一个Microceleb
函数addNewText（）
{
var指数=0；
返回函数（）{
指数+=1；
var celeb=document.createElement（“输入”）；
celeb.type=“text”；
celeb.name=“handle”+索引；
celeb.placeholder=“Twitter句柄