在HTML中動態創建的元素上運行函數

Question

我有一個由加減按鈕包圍的輸入框。 您可以在輸入框中手動輸入數字，也可以按加或減按鈕增加或減少數字

HTML

 <button type="button" class="btn btn-info changeValue" onclick="decreaseValue()">-</button>
    <input type="number" class="form-control" name="quantity" id="addSub" value="0" placeholder="Quantity" required>
    <button type="button" class="btn btn-info changeValue" onclick="increaseValue()">+</button>

使用Javascript

function increaseValue() {
    var value = parseInt(document.getElementById('addSub').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('addSub').value = value;
  }

  function decreaseValue() {
    var value = parseInt(document.getElementById('addSub').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('addSub').value = value;
  }

現在，我有一個按鈕可以動態生成此輸入框。 可以生成多個輸入框。 但是，輸入框中的所有添加和子按鈕將以原始輸入框為目標。 有沒有一種方法可以使添加按鈕和子按鈕始終以它旁邊的輸入框為目標？

Answer 1

單擊按鈕時，請檢查其textContent以查看關聯的輸入是在其左側還是右側，然后分別選擇目標（被單擊元素）的previousElementSibling或nextElementSibling ：

 document.addEventListener('click', ({ target }) => { if (!target.matches('button')) { return; } const doAdd = target.textContent === '+'; const input = doAdd ? target.previousElementSibling : target.nextElementSibling; input.value = Number(input.value) + (doAdd ? 1 : -1); }); 

 <button>-</button> <input type="number" value="0"> <button>+</button> <button>-</button> <input type="number" value="0"> <button>+</button> 

Answer 2

您想要做的就是為您的輸入提供唯一的ID，以便您可以將其輸入到按鈕中以增加或減少值