Почему возвращается undefined при попытке получения значения document.getElementById?

Question

[Николай Бараненко]

Здравствуйте.

Создаю на строке таблице элементы INPUT типа TEXT

var row = "<thead class='thead-inverse' style='background: #84deda'><tr><td>Директор</td>";
                for (var i = 0; i < jsondata[0].department.length; i++) {
row=row+"<td>"+jsondata[0].department[i]+"</td>";
row=row+"<td id='HEAD_D"+i+"' name='HEAD_D"+i+"'><div class='input-group'><input type='text' class='form-control' value='0' onchange='checkColumn(\"HEAD_D\")'></div></td>"
                }
                row=row+"</tr></thead>";
$("#Employees").append(row);

Далее пытаюсь прочитать значение по событию onchange, которое ввел пользователь

console.log(document.getElementById('HEAD_D0').value);

и получаю undefined

Почему undefined в этом случае и как решить эту проблему?
p.s.
элемент точно создался,
проверил

[].forEach.call(document.getElementsByTagName("td"), function (elements_form2) {
            if (([elements_form2.getAttribute('id')].toString()).indexOf(ColumnID)!=-1) {           
                console.log("Нашел "+elements_form2.getAttribute('id'));
            }
        });

имя элемента HEAD_D0 возвращается...

Comments

[Евгений]

Вместо таких жутких простыней рекомендую использовать какие-нибудь шаблоны, типа handlebars. Что угодно, только не это. Вам же самому потом придется это поддерживать, неужели вы считаете, что этот вырвиглазный частокол будет легко читать и изменять?...

Answer 1

[Никита Баев]

У вас HEAD_D0 — это элемент таблицы, а не input, поэтому .value будет undefined, т.к. нет такого свойства у td.

Answer 2

[Николай Бараненко]

в общем правильное обращение к элементу таблицы номера строки 1 и колонки ColumnID

var table = document.getElementById('Employees');
var value= table.rows[1].cells[ColumnID].innerHTML;