javascript - 当我将新的电话输入字段添加到我的表单时，我需要它来显示电话 2 ..电话 3 等

Question

我有一个表单，其中有一个 Phone 1 输入字段。当我单击“添加电话”按钮时，我需要它显示新的输入字段，上面写着 Phone 2 ...Phone 3 等。每次单击按钮时，我都让它只显示 Phone 2 ，但我的方法不是正确的，因为我相信我需要有一个 IF 语句，以便它可以更改电话号码 - 2、3、4、5。

function newPhone () {
   var phone = document.querySelector('.phone'); 
   var label = document.createElement('label') ;
   var input = document.createElement('input')
   var span = document.createElement('span')
   span.textContent= 'Phone 2';
   input.setAttribute('type','text')
   input.setAttribute('name', 'phones')
   label.appendChild(span);
   phone.appendChild(label);
   phone.appendChild(input)
}

<form id="form">
    <div class="field">
     <label>First name</label><input type="text">
    </div>
    <div class="field">
     <label>Last name</label><input type="text">
    </div>
    <div class="field">
     <strong>Phones</strong>
     <div id="list-phones">
       <div class="phone">
        <label>Phone <span>1</span></label><input name="phones[]" 
         type="text">
       </div>
      </div>
    </div>
    <button id="add_phone" type="button" onclick="newPhone()">Add 
  phone</button>
</form>

Answer 1

只需创建一个变量来跟踪数字。即 i 在这里。

var i = 1;

function newPhone () {
  i++;
  var phone = document.querySelector('.phone'); 
  var label = document.createElement('label') ;
  var input = document.createElement('input')
  var span = document.createElement('span')
  span.textContent= 'Phone '+i;
  input.setAttribute('type','text')
  input.setAttribute('name', 'phones-'+i)
  label.appendChild(span);
  phone.appendChild(label);
  phone.appendChild(input)
}

<form id="form">
    <div class="field">
     <label>First name</label><input type="text">
    </div>
    <div class="field">
     <label>Last name</label><input type="text">
    </div>
    <div class="field">
     <strong>Phones</strong>
     <div id="list-phones">
       <div class="phone">
        <label>Phone <span>1</span></label><input name="phones-1" 
         type="text">
       </div>
      </div>
    </div>
    <button id="add_phone" type="button" onclick="newPhone()">Add 
  phone</button>
</form>