Question

我有这个脚本，我正在处理它并且没有错误但是我想在它上面添加一些功能，就像我点击它添加的按钮但我想要输入的name属性文字也要改变。

这是我的剧本：

的javascript：

<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>

HTML：

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

输出：

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

预期输出：

<input id="valueB" data-bind="css: observables.valueBClass, value: observables.idNumber"/>

依旧......

Answer 1

您没有做任何改变名称属性的事情。尝试使用html连接进行这些更改会让您遇到麻烦。这将帮助您入门：

＆＃13;

(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);

  });

})();

＆＃13;

<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>

＆＃13;

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

＆＃13;

(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);

  });

})();

＆＃13;

<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>

＆＃13;

javascript：动态更改name属性

1 个答案: