0

I have a for loop which creates some DOM Elements using a function. The for loop executed with success several times, but suddenly an error appeared and I don't understand why.

I added some console.log in my code for helping you to understand, I will add a screenshot of the console at the end of my question.

So here is the first part of the code:

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
}

Then here is the createComments() function:

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')
}

And finally, this the createNode() and the createNodeBefore() function I use to create my elements:

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
}

Here is the console result : the console result

So the function is executed correctly multiple time, but for some reason it stop working. By looking closer, I was able to determine that the part of the code which not working is this part of the createComment() function :

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

Another really weird thing is, in the createComment() function, if I replace 

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

By 

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

everything works and I didn't have any error.

Don't hesitate to ask me if you need more details or if something is unclear.

EDIT

As requested, I add a console.log of the arguments of the createNode before function, everything seems ok creatNodeBefore arguments

Nicolas J
  • 43
  • 1
  • 10
  • `textarea` elements don't have child nodes. They have a `value`. – Heretic Monkey Mar 06 '19 at 16:43
  • Thanks for your answer. I modify `createNode() ` and `createNodeBefore() ` for changing the value instead of create a child node if it is a textarea, but I still have the same error. – Nicolas J Mar 06 '19 at 17:00
  • Can you use alternatives to createElement https://stackoverflow.com/a/7377447/10634638 – estinamir Mar 06 '19 at 17:01
  • I would check the arguments passed to `createNodeBefore` from within that function (so each of `parent`, `node`, `type`, `text`). Sounds like one of those is not what you think it is. – Heretic Monkey Mar 06 '19 at 17:06
  • Which line is line 157? – Barmar Mar 06 '19 at 17:16
  • I don't see the `let answerPostCommentInput` line in `createComment()`. – Barmar Mar 06 '19 at 17:18
  • @bestinamir I tried to add the textarea using innerHTML, it dosen't seems to solve the issue. I can't use it in my createNode and createNodeBefore function because sometimes there is multiple childrens for a same parent and I'm not always adding a node as the last child. – Nicolas J Mar 06 '19 at 21:51
  • @HereticMonkey I edit the post with the value of the arguments, everything seems alright – Nicolas J Mar 06 '19 at 21:52
  • @Barmar You are totally right, I forgot to add this part of the function. I edited the post for adding it. For the line 157 it's not in the code you can see. It's a `catch(function(error) { console.log(error); });`. The initial `for` loop is called in a fetch response, it's the catch of this fetch. – Nicolas J Mar 06 '19 at 21:56
  • Change that to `console.log(error + " on line " + error.lineNumber);` so you can see where the actual error happened. – Barmar Mar 06 '19 at 22:12
  • @Barmar I change it and the error is now `NotFoundError: Node was not found on line 1`. But I have nothing on line 1 except my `jQuery(function() {`. Do you have an idea of what could possibly cause this ? – Nicolas J Mar 06 '19 at 22:53
  • I guess it loses track of the actual line number with async code, that makes things complicated. – Barmar Mar 06 '19 at 22:55
  • May be it would help if you added a runnable fiddle/snippet.. You seem to be using a lot of “let” keywords if you don’t specifically need anonymous variables I would stick with “var”.. – estinamir Mar 07 '19 at 14:50

0 Answers0