Как определить динамические html-объекты в javascript?

Question

У меня есть html-код, как показано ниже. Я хотел бы знать, как динамически идентифицировать sessionEventsDecorator [0] .startDateStr, sessionEventsDecorator [1] .startDateStr в javascript. Цель состоит в том, чтобы убедиться, что пользователь не ввести значение года больше, чем 2013.

<input id="sessionEventsDecorator[0].startDateStr" name="sessionEventsDecorator[0].startDateStr" class="text small" onchange="formDirty();" type="text" value="Mar 05, 2013"/&rt; 


<input id="sessionEventsDecorator[1].startDateStr" name="sessionEventsDecorator[1].startDateStr" class="text small" onchange="formDirty();" type="text" value="Mar 05, 2013"/&rt; 

Answer 1

Хорошо, основанный на ваш комментарий к ответу Sebas', я думаю, что это является то, что вы ищете, основанный на том, что мы можем видеть ваш код:

var loopIndex = 0; 

while (document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr")) 
{ 
    var inputField = document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr"); 

    . . . logic to check date . . . 

    loopIndex++; 
} 

это, как говорится, соглашение об именах для дивы является своего рода запутанным. Упрощение идентификаторов помогло бы в удобочитаемости. Кроме того, есть более чистые способы выполнения итерации, если вы можете использовать JQuery и дать всем этим входам общий класс.

Answer 2

document.getElementById("sessionEventsDecorator[0].startDateStr").value <=2013 

Это будет проверить, что для вас. Но я не думаю, что вы понимаете, как идентификаторы работают правильно. Идентификаторы не являются динамическими и не работают как массивы, они служат уникальными идентификаторами для отдельных html-объектов.

Что-то вроде «sessionEventDecoratorDate0» было бы более нормальным.

Если вы хотите, чтобы петля над всеми из них и не знаете, сколько есть, вы можете получить значения по

var counter=0; 
while (true){ 
    var element = document.getElementById("sessionEventsDecorator["+counter+"].startDateStr"); 
    if(element){ 
    counter++; 
    //do logic here on element 
    } 
    else{ 
    break; 
    } 
} 

Answer 3

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

<input type="text" class="text small" onchange="formDirty()" name="dateDecorator0" id="dateDecorator0"> 

<input type="text" class="text small" onchange="formDirty()" name="dateDecorator1" id="dateDecorator1"> 

Теперь у нас есть что-то легко работать. Поэтому в нашем Javascript теперь мы можем получить доступ ко всем входам с document.getElementById("dateDecorator"+i).value. Но я, честно говоря, даже не знаю, почему вы хотите это сделать, когда внутри formDirty() функцию он должен выглядеть примерно так:

function formDirty(){ 
    var val=this.value; 
    if(val.substr(val.indexOf(",")+2) > 2013){ 
     this.value=val.substr(0,val.indexOf(",")+2)+"2013"; 
    }; 
}