如何獲取JavaScript中動態生成的字段名稱的句柄？

Question

我有一系列基於數據庫記錄動態創建的字段。 根據需要，它們將被命名為cardObject1，cardObject2，依此類推。 我現在正在嘗試在傳遞數字的函數中訪問特定的cardObject字段，但收到一條錯誤消息。

該字段如下所示：

<input name="cardObject241" value="2,$25.00,1" type="hidden">

我正在使用的js代碼如下所示：

function deleteFromCart(id){
  if (confirm("Are you sure you want to delete this item from your cart?")){
    var voucherNbr = document.getElementById("voucherNbr").value;
    var cardObjectArray = document.getElementById("cardObject"+id).value.split();
    var amtToDelete = cardObjectArray[1];
    alert("need to delete " + amtToDelete); 
  }

}

我得到的錯誤是

document.getElementById("cardObject" + id) is null

在這條線上：

 var cardObjectArray = document.getElementById("cardObject"+id).value.split(); 

如何獲取以id參數形式傳入的數字結尾的cardObject字段的句柄？

Answer 1

您需要添加一個與名稱屬性同名的id =“”屬性。

<input id="cardObject241" name="cardObject241" value="2,$25.00,1" type="hidden">

Answer 2

首先，您的輸入字段需要一個ID和一個名稱，因此它看起來像這樣：

<input name="cardObject241" id="cardObject241" value="2,$25.00,1" type="hidden">

其次，如果您有一個可能存在或可能不存在的對象，在開始操作屬性之前檢查是否存在總是一個好主意：

var tempObj=document.getElementById("cardObject"+id)
if(tempObj) {
    var cardObjectArray = tempObj.value.split();
    ...do your stuff with cardObjectArray....
}

Answer 3

您可以使用document.getElementsByName()或（跨瀏覽器返回石器時代）

document.forms[formIndexOrName].elements["cardObject" + id].value.split(",")