Как я могу получить дескриптор динамически сгенерированного имени поля в 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(); 

Как я могу получить дескриптор поля cardObject, которое заканчивается числом, переданным в качестве параметра id?

Answer 1

Во-первых, ваше поле ввода нуждается в идентификаторе, а также в имени, поэтому оно будет выглядеть так:

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

Вы можете использовать document.getElementsByName() или (кросс-браузер обратно в каменный век)

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

Answer 3

Вам необходимо добавить атрибут id = "" с тем же именем, что и атрибут name.

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