Невозможно установить входное значение с помощью JS DOM, если вход находится в таблице, также созданной с помощью JS DOM

Question

Я создаю таблицу HTML с JS DOM. Некоторые из ячеек имеют текстовые входы, и я хочу установить значение этих текстовых входов в том же блоке JS. Кажется, что независимо от того, что я делаю, браузер отказывается отображать значение, которое я установил. Для некоторого контекста следующего кода это происходит в методе класса. У конструктора класса есть объект с именем 'elem', в котором я предварительно определил большинство используемых элементов. Все отрисовывается идеально, но входы на 100% пусты.

this.elem.cont = document.createElement('div'); this.elem.hold = document.createElement('div')
this.elem.cont.id = 'popupcont'; this.elem.hold.id = 'popuphold'
this.elem.umTable = document.createElement('table'); this.elem.umTable.id = 'usermantable'
this.elem.umRow = document.createElement('tr')
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Username'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Name'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Password'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Confirm password'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Can blog?'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Manage calendar?'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.umCell.innerHTML = 'Is admin?'
this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umTable.appendChild(this.elem.umRow)
this.elem.umRow = document.createElement('tr')
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.value = edit ? user.uname : ''
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.value = edit ? user.name : ''
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'password'
this.elem.uaeInput.id = 'uaepass1'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'password'
this.elem.uaeInput.id = 'uaepass2'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'checkbox'
this.elem.uaeInput.checked = edit ? user.blogpost : 'false'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'checkbox'
this.elem.uaeInput.checked = edit ? user.calendar : 'false'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'checkbox'
this.elem.uaeInput.checked = edit ? user.admin : 'false'
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)
this.elem.umTable.appendChild(this.elem.umRow)
this.elem.hold.appendChild(this.elem.umTable)
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'button'
this.elem.uaeInput.value = 'Submit'
this.elem.hold.appendChild(this.elem.uaeInput)
this.elem.hold.innerHTML += '<br />Leave the password fields blank if you do not wish to update the user\'s password.<br />'
this.elem.cont.appendChild(this.elem.hold)

Итак, продолжение добавляется к соответствующему элементу в DOM. Рендеринг отлично, но текстовые поля пусты независимо от того, что я пытаюсь. Я попытался изменить значение до и после добавления ввода в ячейку и после добавления ячейки в строку. Я создал новые переменные 'let' вместо того, чтобы использовать переменную this.elem, определенную для ввода, ячейки и строки. Текстовые входы всегда отображаются пустыми. Заранее благодарим за помощь: -)

Answer 1

Я нашел решение проблемы. Вместо использования element.value я использовал element.setAttribute ('value', 'blah blah blah ...'), и это сработало.

Тааак это:

this.elem.umRow = document.createElement('tr')
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.value = edit ? user.uname : ''
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)

становится этим:

this.elem.umRow = document.createElement('tr')    
this.elem.umCell = document.createElement('td')
this.elem.uaeInput = document.createElement('input'); this.elem.uaeInput.type = 'text'
this.elem.uaeInput.setAttribute('value', edit ? user.uname : '')
this.elem.umCell.appendChild(this.elem.uaeInput); this.elem.umRow.appendChild(this.elem.umCell)

Надеюсь, это кому-нибудь поможет!