如何使用javascript动态添加字段？答案

【问题标题】：How to dynamically add fields using java script?如何使用javascript动态添加字段？
【发布时间】：2018-06-19 07:32:26
【问题描述】：

这是我的另一个按钮以及要包含的字段的代码

<div id="tab-2" class="tab-content">
<div class="invoice-items"><div class="invoice-item">
<div class="item-description"><div class="autocomplete">
<input type="text" placeholder="Description" maxlength="255" 
class="input"> <ul class="ac-dropdown" style="display: none;">
</ul>
</div>
</div>
<div class="item-line-2">
<div class="flex item-price">
<label for="i-item_price_0" class="label-addon-left">USD</label> 
<input type="text" placeholder="0.00" id="i-item_price_0" autocomplete="off" 
class="input input-addon-left">
</div> <!----> 
<div class="item-actions">
</div>
</div>
</div>
</div>
<button type="submit" >Add Another Item</button>
</div>

javascript

var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit)  {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Item" + (counter + 1) + " <input type="text" 
placeholder="Description" maxlength="255" class="input"> <ul class="ac-
dropdown" style="display: none;">";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}

这里是 javascript 。我无法点击。事实上，我的按钮点击没有响应

【问题讨论】：

您自己做过一些研究吗？因为这个标题听起来像是被回答了很多次。
要重新添加整个标签页吗？此外，请提供您尝试实现此目的的 javascript 代码并分享您面临的错误/问题...
是的，我已经创建了我的 javascript，但它不工作。等我提供javascript
你尝试过什么来达到你想要的结果？你对你的问题的研究表明了什么？你能提供你的尝试代码吗？ How do I ask a good question 和 How much research effort is expected 可能有助于改善您的问题。

标签： javascript php codeigniter

【解决方案1】：

首先，您应该注意引用闭包。

用这个重构innerHTML部分

newdiv.innerHTML = "Item" + (counter + 1) + " <input type='text' 
placeholder='Description' maxlength='255' class='input'> <ul class='ac-
dropdown' style='display: none;'>";

您可能还需要一个结束标签，也就是输入末尾的 /> 而不仅仅是 >

【讨论】：

【解决方案2】：

将点击事件附加到您的按钮：

 <button type="submit" onclick="addInput()">Add Another Item</button>

并在此处更新行：

 newdiv.innerHTML = "Item" + (counter + 1) + " <input type='text' placeholder='Description' maxlength='255' class='input'><ul class='ac-dropdown' style='display: none;'>";

【讨论】：

【解决方案3】：

您的按钮没有附加事件侦听器。因此，当您单击时，不会告诉浏览器该做什么。我建议这样的事情......

// Add event listener to the submit button
document.querySelector('button').addEventListener('click', addNewItem);

function addNewItem(e) {
  // Prevent default action (not sure if this is needed since I can't see all of your code)
  e.preventDefault();

  // Check if list items are at limit yet
  const invoiceItems = document.querySelector('.invoice-items'); // The 'list' of items
  const counter = invoiceItems.children.length; // The number of items in the list
  if (counter >= 3) {
    alert("You have reached the limit of adding " + counter + " inputs");
  } else {

    // Create a new list item    
    const newItem = document.createElement('div');

    // Add the appropriate class and add children elements to new list item
    // You may want to clean up your code a bit, there is an unused <ul> and
    // an unused HTML comment, but I just copied what you already had
    newItem.className = 'invoice-item';
    newItem.innerHTML = '<div class="item-description"><input type="text" placeholder="Description" maxlength="255" class="input"><ul class="ac-dropdown" style="display: none;"></ul></div></div><div class="item-line-2"><div class="flex item-price"><label for="i-item_price_' + counter + '" class="label-addon-left">USD</label><input type="text" placeholder="0.00" id="i-item_price_' + counter + '" autocomplete="off" class="input input-addon-left"></div><!----><div class="item-actions"></div></div>';

    // Attach the new list item to the list
    invoiceItems.appendChild(newItem);
  }
}

<div id="tab-2" class="tab-content">
    <div class="invoice-items">
      <div class="invoice-item">
        <div class="item-description">
          <div class="autocomplete">
            <input type="text" placeholder="Description" maxlength="255" class="input">
            <ul class="ac-dropdown" style="display: none;">
            </ul>
          </div>
        </div>
        <div class="item-line-2">
          <div class="flex item-price">
            <label for="i-item_price_0" class="label-addon-left">USD</label>
            <input type="text" placeholder="0.00" id="i-item_price_0" autocomplete="off" class="input input-addon-left">
          </div>
          <!---->
          <div class="item-actions">
          </div>
        </div>
      </div>
    </div>
    <button type="submit">Add Another Item</button>
  </div>

【讨论】：