Увеличение счетчика при динамическом добавлении строк

Question

Я пытаюсь добавить строки динамически и автоматически увеличивать счетчик. Я хочу начать с 1, затем 2, затем 3 и так далее. Я добавил свой код на плункер, в котором каждый раз, когда максимальное значение попадает в первый столбец, как 4, тогда 1,1,2,3. Где я ошибаюсь? Я хочу, чтобы он был 1,2,3,4.

Вот ссылка plunker http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview

  var _counter = 0;   
     function Add() { 
      _counter++; 
      var oClone = document.getElementById("template").cloneNode(true); 
      oClone.id += (_counter + ""); 
      document.getElementById("placeholder1").appendChild(oClone); 
      document.getElementById("myVal").value=_counter; 

     } 

    <div id="placeholder1"> 
    <div id="template"> 
     <div> 
     Value:<input type="text" id="myVal" placeholder="1"> 
     Quantity:<input type="text" placeholder="Qty"> 

      <input type="button" onClick="Add()" value="Click! "> 
     </div> 
    </div> 

Answer 1

Я предполагаю, что вы ищете что-то вроде этого:

var _counter = 0; 
 

 
function Add() { 
 
    _counter++; 
 
    var oClone = document.getElementById("template").cloneNode(true); 
 
    oClone.id += (_counter + ""); 
 
    document.getElementById("placeholder1").appendChild(oClone); 
 
    oClone.getElementsByClassName("myVal")[0].value = _counter; 
 
}

<div id="placeholder1"> 
 
    <div id="template"> 
 
    <div> 
 
     Value: 
 
     <input type="text" class="myVal" placeholder="1">Quantity: 
 
     <input type="text" placeholder="Qty"> 
 

 
     <input type="button" onClick="Add()" value="Click! "> 
 
    </div> 
 
    </div> 
 
</div>

В вашем оригинале клонировании ваш templ ел с тем же id для ввода. Поэтому, когда вы делаете document.getElementById("myVal").value=_counter;, вы получаете только вход. Я изменил его, чтобы вместо этого использовать class и получить вход с соответствующим классом, который является дочерним элементом клонированного узла.

Answer 2

Я думаю, это потому, что у вас есть несколько div с id = "myVal". The id attribute should be unique на странице. Если нет, ваша страница все равно будет загружена, но вы можете столкнуться с неожиданным поведением.

Вы меняете идентификатор шаблона div, но не div myVal.