Question

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

<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。我无法点击。事实上，我的按钮点击没有响应

Answer 1

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

使用此

重构innerHTML部分

<input type="text" id="from"/>
<input type="text" id="to"/>

$('#from').datepicker(
{
    format: "dd-M-yyyy",
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true
});

您可能还需要结束标记，a.k.a /＆gt;在输入的末尾，而不仅仅是＆gt;

Answer 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;'>";

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

如何使用java脚本动态添加字段？

3 个答案: