Проблема с createElement () и текстовой областью - PullRequest
Новая
       31

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

0 голосов
/ 06 марта 2019

У меня есть цикл for, который создает некоторые элементы DOM с помощью функции.Цикл for успешно выполнялся несколько раз, но внезапно появилась ошибка, и я не понимаю, почему.

Я добавил немного console.log в свой код, чтобы помочь вам понять, я добавлю скриншот консоли в конце моего вопроса.

Итак, вот первая частькод: 

if(comments.length > 0) {
    for(let k = 0; k < comments.length; k++) {
         console.log('in the for 1')
         createComment(commentContainer,comments[k])                            
         console.log('in the for 2')
    }
    console.log('after the for') // We never reach this console.log
}

Тогда вот функция createComments(): 

let createComment = (container, data, answer = true) => {

    console.log('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.log('End createComment')
}

И, наконец, эта функция createNode() и createNodeBefore(), которую я использую для создания своих элементов:

let createNode = (parent, type, text, id = false, className = false, style = false) => {

    console.log('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.log('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
}

Вот результат консоли: the console result

Таким образом, функция выполняется правильно несколько раз, но по какой-то причине перестает работать.Посмотрев поближе, я смог определить, что часть кода, которая не работает, является частью функции createComment(): 

let createComment = (container, data, answer = true) => {

    console.log('Start createComment')

    let newCommentPart          = container.getElementsByTagName('textarea')[0]
    console.log(newCommentPart)
    console.log(container)
    let singleCommentContainer  = createNodeBefore(container, newCommentPart,  'div', '')
    console.log('We never reach this part')

Console log

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

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

на 

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

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

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

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

По запросу я добавляю console.logиз аргументов функции createNode before все выглядит нормально creatNodeBefore arguments

...