У меня есть цикл for, который создает некоторые элементы DOM с помощью функции. Цикл for успешно выполнялся несколько раз, но вдруг появлялась ошибка, и я не понимаю, почему.
Я добавил немного console.info в свой код, чтобы помочь вам понять, я добавлю скриншот консоли в конце моего вопроса.
Итак, вот первая часть кода:
if (comments.length > 0) {
for(let k = 0; k < comments.length; k++) {
console.info('in the for 1')
createComment(commentContainer,comments[k])
console.info('in the for 2')
}
console.info('after the for') // We never reach this console.info
}
Тогда вот функция createComments():
let createComment = (container, data, answer = true) => {
console.info('Start createComment')
let newCommentPart = container.getElementsByTagName('textarea')[0]
let singleCommentContainer = createNodeBefore(container, newCommentPart, 'div', '')
if (answer === true){
let answeringContainer = createNode(singleCommentContainer, 'span', '')
let answeringButton = createNode(singleCommentContainer, 'span', `text random`)
if (data.answers && data.answers.length > 0) {
for(let i = 0; i < data.answers.length; i++) {
createComment(answeringContainer, data.answers[i], false)
}
}
let answerPostCommentInput = createNode(answeringContainer, 'textarea', '')
let answerPostCommentButton = createNode(answeringContainer, 'span', 'Some text')
}
console.info('End createComment')
}
И, наконец, это функция createNode() и createNodeBefore(), которые я использую для создания своих элементов:
let createNode = (parent, type, text, id = false, className = false, style = false) => {
console.info('createNode :' + type)
let textNode = document.createTextNode(text)
let element = document.createElement(type)
element.className = className ? className : "";
element.id = id ? id : "";
element.style = style ? style : "";
element.appendChild(textNode)
parent.appendChild(element)
console.info('Element :' + element)
return element
}
let createNodeBefore = (parent, node, type, text, id = false, className = false, style = false) => {
let textNode = document.createTextNode(text)
let element = document.createElement(type)
element.className = className ? className : ""
element.id = id ? id : ""
element.style = style ? style : ""
element.appendChild(textNode)
parent.insertBefore(element, node)
return element
}
Таким образом, функция многократно выполняется корректно, но почему-то перестает работать. Присмотревшись, я смог определить, что часть кода, которая не работает, является частью функции createComment():
let createComment = (container, data, answer = true) => {
console.info('Start createComment')
let newCommentPart = container.getElementsByTagName('textarea')[0]
console.info(newCommentPart)
console.info(container)
let singleCommentContainer = createNodeBefore(container, newCommentPart, 'div', '')
console.info('We never reach this part')
Еще одна действительно странная вещь: в функции createComment(), если я заменю
let answerPostCommentInput = createNode(answeringContainer, 'textarea', '')
К
let answerPostCommentInput = createNode(answeringContainer, 'span', '')
все работает и у меня не было ни одной ошибки.
Не стесняйтесь спрашивать меня, если вам нужна дополнительная информация или что-то неясно.
РЕДАКТИРОВАТЬ
По запросу я добавляю console.info аргументов функции createNode перед функцией, все вроде нормально

Спасибо за Ваш ответ. Я изменяю createNode() и createNodeBefore() для изменения значения вместо создания дочернего узла, если это текстовая область, но у меня все еще есть та же ошибка.
Можете ли вы использовать альтернативы для createElement stackoverflow.com/a/7377447/10634638
Я бы проверил аргументы, переданные createNodeBefore из этой функции (то есть каждый из parent, node, type, text). Похоже, один из них не то, что вы думаете.
Какая строка является строкой 157?
Я не вижу строчку let answerPostCommentInput в createComment().
@bestinamir Я пытался добавить текстовое поле с помощью innerHTML, похоже, это не решает проблему. Я не могу использовать его в своих функциях createNode и createNodeBefore, потому что иногда у одного и того же родителя есть несколько дочерних элементов, и я не всегда добавляю узел в качестве последнего дочернего узла.
@HereticMonkey Я редактирую сообщение со значением аргументов, вроде все в порядке
@Barmar Вы совершенно правы, я забыл добавить эту часть функции. Я отредактировал пост, чтобы добавить его. Для строки 157 ее нет в коде, который вы видите. Это catch(function(error) { console.info(error); });. Начальный цикл for вызывается в ответе на выборку, это ловушка этой выборки.
Измените это на console.info(error + " on line " + error.lineNumber);, чтобы вы могли видеть, где произошла фактическая ошибка.
@Barmar Я меняю его, и теперь ошибка NotFoundError: Node was not found on line 1. Но у меня в строке 1 ничего нет, кроме моего jQuery(function() {. У вас есть идея, что может быть причиной этого?
Я предполагаю, что он теряет фактический номер строки с асинхронным кодом, что усложняет ситуацию.
Может быть, было бы полезно, если бы вы добавили исполняемую скрипту/фрагмент. Кажется, вы используете много ключевых слов «let», если вам специально не нужны анонимные переменные, я бы придерживался «var»..



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


textareaэлементы не имеют дочерних узлов. У них естьvalue.