javascript：动态更改名称属性 [英] javascript: changing the name attribute dynamically

问题描述

我有这个脚本我正在工作，没有错误，但我想添加一些功能，就像我点击它添加的按钮，但我想要输入文本的name属性也被改变。

这是我的脚本：

javascript：

  var a = 1; 
 function add（）{
 
 var fContent = document.getElementById（'1'）; 
 var sContent = document.getElementById（'2'）; 
 if（a< = 10）{
 a ++; 
 var objTo = document.getElementById（'m'）; 
 var divtest = document.createElement（div）; 
 divtest.innerHTML =（sContent.innerHTML + a + fContent.innerHTML）; 
 alert（divtest.innerHTML）; 
 objTo.appendChild（divtest）; 
} 
} 
  

html： p>

 < input type =buttononclick =add（） value =+/> 
< div id =m> 
< div id =1> 
< input type =textname =f> 
< input type =textname =l> 
< input type =textname =m> 
< / div> 
< div id =2>< / div> 
< / div> 
  

OUTPUT：

  2 
< input type =textname =f> 
< input type =textname =l> 
< input type =textname =m> 
  

预期输出：

  2 
< input type =textname =f2> 
< input type =textname =l2> 
< input type =textname =m2> 
  

等等...

解决方案

你没有做任何改变名称属性的事情。尝试用html连接进行这些更改会让您陷入困境。这将让你开始：

 （function（）{var a = 1 ; //获取对容器的引用var container = document.getElementById（m）; //获取对输入的第一行的引用var base = container.children [0]; document.querySelector（button） .addEventListener（click，function（e）{if（++ a> 10）return; //克隆输入的第一行var clone = base.cloneNode（1）; //通过设置span的textContent clone.children [0] .textContent = a; //设置输入字段的名称clone.children [1] .name =f+ a; clone.children [2] .name =l+ a; clone.children [3] .name =m+ a; //将新行添加到容器container.appendChild（clone）; console.log（clone）;}）;}）（）;  

 < button type =button> +< / button>< div id =m> < div>< span> 1< / span>< input type =textname =f1>< input type =textname =l1>< input type = name =m1>< / div>< / div>  

如果你想从头创建元素...

 （function（）{var a = 1; //获取对容器的引用var container = document.getElementById（m）; var input; var span; var div; document.querySelector（button） .addEventListener（click，function（e）{if（++ a> 10）return; //创建我们的div div = document.createElement（div）; //创建并附加我们的span span = document。 createElement（span）; span.textContent = a; div.appendChild（span）; //创建和追加输入[f，l，m] forEach（function（n）{input = document.createElement（input）; input.name = n + a; div.appendChild（输入）; }）; //附加我们的div container.appendChild（div）;的console.log（DIV）; }）;}）（）;  

 < =button> +< / button>< div id =m> < div>< span> 1< / span>< input type =textname =f1>< input type =textname =l1>< input type = name =m1>< / div>< / div>  

I have this script I'm working on and there's no errors on it but I want to add some functions on it like when I click the button it adds but I want the name attribute of the input text to be changed too.

Here's my script:

javascript:

var a = 1;
function add() {

    var fContent = document.getElementById('1');
    var sContent = document.getElementById('2');
    if (a <= 10) {
        a++;
        var objTo = document.getElementById('m');
        var divtest = document.createElement("div");
        divtest.innerHTML = (sContent.innerHTML + a + fContent.innerHTML);
        alert(divtest.innerHTML); 
        objTo.appendChild(divtest);
    }
}

html:

<input type="button" onclick="add();" value="+" />
<div id="m">
<div id="1">
<input type="text" name="f">
<input type="text" name="l">
<input type="text" name="m">
</div>
<div id="2"></div>
</div>

OUTPUT:

2
<input type="text" name="f">
<input type="text" name="l">
<input type="text" name="m">

EXPECTED OUTPUT:

2
<input type="text" name="f2">
<input type="text" name="l2">
<input type="text" name="m2">

and so on...

解决方案

You're not doing anything to change the name attributes. Trying to make those changes with html concatenation will get you into trouble. This will get you started:

(function() {

  var a = 1;

  // get a reference to the container
  var container = document.getElementById("m");
  // get a reference to the first row of input
  var base = container.children[0];  
  
  document.querySelector("button").addEventListener("click", function(e) {

    if(++a > 10) return;
    
    // clone the first row of input
    var clone = base.cloneNode(1);
    
    // change the number text by setting the span's textContent
    clone.children[0].textContent = a;
    // set the names of the input fields
    clone.children[1].name = "f" + a;
    clone.children[2].name = "l" + a;
    clone.children[3].name = "m" + a;
    
    // add the new row to the container
    container.appendChild(clone);
    
    console.log(clone);

  });

})();

<button type="button">+</button>
<div id="m">
  <div><span>1</span><input type="text" name="f1"><input type="text" name="l1"><input type="text" name="m1"></div>
</div>

If you'd rather create the elements from scratch...

(function() {

  var a = 1;

  // get a reference to the container
  var container = document.getElementById("m");    
  var input;
  var span;
  var div;
  
  document.querySelector("button").addEventListener("click", function(e) {

    if(++a > 10) return;
    
    // create our div
    div = document.createElement("div");
    
    // create and append our span
    span = document.createElement("span");
    span.textContent = a;
    div.appendChild(span);
    
    // create and append inputs    
    ["f","l","m"].forEach(function(n){
       input = document.createElement("input");
       input.name = n + a;
       div.appendChild(input);            
    });
                
    // append our div
    container.appendChild(div);
    
    console.log(div);

  });

})();

<button type="button">+</button>
<div id="m">
  <div><span>1</span><input type="text" name="f1"><input type="text" name="l1"><input type="text" name="m1"></div>
</div>

这篇关于javascript：动态更改名称属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！