CodingForums.com - Issue With Defining Object and appendChild

Okay so I am having a problem trying to initiate an AJAX request and, specifically, using the createElement and appendChild functions. More specifically I think the issue is that I don’t know how to properly define and set objects.

I want to initialize an object ‘comment’ that becomes a created element (of type div). Then I want to add innerHTML (as text from my AJAX responseText) and add an ID (again based on the responseText I get back). Then I am getting the div from the actual page (which will be ‘review_x’ where x is a number). At this point I want to append the text from the comment div to that original review_x div using appendChild.

However, it is giving me the following error:

Code:

Uncaught TypeError: Cannot call method 'appendChild' of undefined

This is for the line that is in bold below:

Code:

function showComments(reviewId){

    'use strict';

    var ajax = getXMLHttpRequestObject();

    if (ajax) {

                

                var currentReviewId = reviewId;

                // Create the Ajax object:

                

                ajax.onreadystatechange = function() {

                    if (ajax.readyState === 4){

                        //Check the status code:

                        if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status === 304) ) {

                            var commentResponse = JSON.parse(ajax.responseText);

                            var i = 1;

                            while (commentResponse[i]) {

                                    var comment = {}; //initialize comment object

                                    comment = document.createElement('div'); // set comment object equal to newly created div element

                                    comment.innerHTML = "Posted by: " + commentResponse[i].submitted_by_id + " | " +

                                                          "Submitted" + commentResponse[i].date_of_submission + "\n"; //set innerHTML property equal to some of the responseText

                                    comment.innerHTML += commentResponse[i].text; //concatenate some more of the responseText to comment's innerHTML

                                    comment.id = "comment_" + commentResponse[i].commentId; //set the id property of the comment object equal to concatenation of 'comment_' plus responseText's commentId property.

                                    var relatedReview = {name: document.getElementById["review_" + commentResponse[i].review_id]}; //create new object relatedReview and set the name equal to 'review_' plus responseText's commentId property

                                    relatedReview.name.appendChild(comment); // this is the line giving me an error, it is saying "cannot call method 'appendChild' of undefined

                                    i++;

                                    } //end of response text check

                                

                        

                            } //end of Ajax connectivity check

                            else { //if Ajax status text is a failure

                                

                                }

                        } //end of Ajax ready state

                    }; //end of function for execution on ready state change

                    

                var data = 'currentReviewId=' + encodeURIComponent(currentReviewId);

                ajax.open('GET', '../resources/find_comments.php?' + data, true);

                ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');



                ajax.send(data);

        } //end if ajax object exists

        else {

            

        } //end if it doesn't exist

    } //end of showComments

I am not that familiar with initializing, defining / setting, and using objects. What am I doing wrong? Any help would be greatly appreciated!

For reference, here is the responseText (from the dev console in Chrome):

Code:

1: {commentId:1, text:This is a comment, date_of_submission:2012-10-07 20:53:06, submitted_by_id:1,…}

commentId: "1"

comment_level: "1"

date_of_submission: "2012-10-07 20:53:06"

parent_comment_id: "0"

review_id: "9"

submitted_by_id: "1"

text: "This is a comment"