Проблема с createElement() и текстовой областью

У меня есть цикл 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
}

Вот результат консоли: Проблема с createElement() и текстовой областью

Таким образом, функция многократно выполняется корректно, но почему-то перестает работать. Присмотревшись, я смог определить, что часть кода, которая не работает, является частью функции 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')

Проблема с createElement() и текстовой областью

Еще одна действительно странная вещь: в функции createComment(), если я заменю

let answerPostCommentInput  = createNode(answeringContainer, 'textarea', '')

К

let answerPostCommentInput  = createNode(answeringContainer, 'span', '')

все работает и у меня не было ни одной ошибки.

Не стесняйтесь спрашивать меня, если вам нужна дополнительная информация или что-то неясно.

РЕДАКТИРОВАТЬ

По запросу я добавляю console.info аргументов функции createNode перед функцией, все вроде нормально Проблема с createElement() и текстовой областью

textarea элементы не имеют дочерних узлов. У них есть value.
Heretic Monkey 06.03.2019 17:43

Спасибо за Ваш ответ. Я изменяю createNode() и createNodeBefore() для изменения значения вместо создания дочернего узла, если это текстовая область, но у меня все еще есть та же ошибка.

Nicolas J 06.03.2019 18:00

Можете ли вы использовать альтернативы для createElement stackoverflow.com/a/7377447/10634638

estinamir 06.03.2019 18:01

Я бы проверил аргументы, переданные createNodeBefore из этой функции (то есть каждый из parent, node, type, text). Похоже, один из них не то, что вы думаете.

Heretic Monkey 06.03.2019 18:06

Какая строка является строкой 157?

Barmar 06.03.2019 18:16

Я не вижу строчку let answerPostCommentInput в createComment().

Barmar 06.03.2019 18:18

@bestinamir Я пытался добавить текстовое поле с помощью innerHTML, похоже, это не решает проблему. Я не могу использовать его в своих функциях createNode и createNodeBefore, потому что иногда у одного и того же родителя есть несколько дочерних элементов, и я не всегда добавляю узел в качестве последнего дочернего узла.

Nicolas J 06.03.2019 22:51

@HereticMonkey Я редактирую сообщение со значением аргументов, вроде все в порядке

Nicolas J 06.03.2019 22:52

@Barmar Вы совершенно правы, я забыл добавить эту часть функции. Я отредактировал пост, чтобы добавить его. Для строки 157 ее нет в коде, который вы видите. Это catch(function(error) { console.info(error); });. Начальный цикл for вызывается в ответе на выборку, это ловушка этой выборки.

Nicolas J 06.03.2019 22:56

Измените это на console.info(error + " on line " + error.lineNumber);, чтобы вы могли видеть, где произошла фактическая ошибка.

Barmar 06.03.2019 23:12

@Barmar Я меняю его, и теперь ошибка NotFoundError: Node was not found on line 1. Но у меня в строке 1 ничего нет, кроме моего jQuery(function() {. У вас есть идея, что может быть причиной этого?

Nicolas J 06.03.2019 23:53

Я предполагаю, что он теряет фактический номер строки с асинхронным кодом, что усложняет ситуацию.

Barmar 06.03.2019 23:55

Может быть, было бы полезно, если бы вы добавили исполняемую скрипту/фрагмент. Кажется, вы используете много ключевых слов «let», если вам специально не нужны анонимные переменные, я бы придерживался «var»..

estinamir 07.03.2019 15:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
13
58
0

Другие вопросы по теме