Element.getElementByClassName and Element.appendChild() not working

Question

Please go through the following code snippet and let me know what the issue is. please search for "// not working" in following code

const $data = `{
    "students": [
        {
            "name": "Jayaraman Thiyyadi",
            "age": 30,
            "gender": "m",
            "course": [
                {
                    "name": "JavaScript",
                    "level": "Beginner",
                    "start": "01/01/2017",
                    "end": "01/01/2018",
                    "grade": "a",
                    "current": true
                },
                {
                    "name": "HTML & CSS",
                    "level": "Beginner",
                    "start": "01/02/2017",
                    "end": "01/09/2017",
                    "grade": "b",
                    "current": false
                }
            ],
            "scholar": ""
        },
        {
            "name": "Jayaraman Thiyyadi",
            "age": 30,
            "gender": "m",
            "course": [
                {
                    "name": "JavaScript",
                    "level": "Beginner",
                    "start": "01/01/2017",
                    "end": "01/01/2018",
                    "grade": "a",
                    "current": true
                },
                {
                    "name": "HTML & CSS",
                    "level": "Beginner",
                    "start": "01/02/2017",
                    "end": "01/09/2017",
                    "grade": "b",
                    "current": false
                }
            ],
            "scholar": "50%"
        }
    ]
}`;


const disp_container = document.getElementsByClassName('display-results'),
    data_result = JSON.parse($data),

    createElement = (element, attr, attrVal, content) => {
        const elm = document.createElement(element);
        if(attr != undefined && attrVal != undefined) {
            elm.setAttribute(attr, attrVal)
        }
        if(content != undefined) {
            elm.innerHTML = content;    
        }
        return elm;
    },
    studDispData = () => {
        const students = data_result.students;
        for (let i = 0; i < students.length; i++) {
            const std = students[i];
            const parent = createElement("div", "class", "results", "");

            console.log(parent);


// not working
            disp_container.innerHTML = parent;
                        disp_container.appendChild(parent);


            for (key in std) {

// not working
                const cover = disp_container.getElementsByClassName("results");
                console.log(disp_container.getElementsByClassName("results").length);

                const items = createElement("div", "class", "list-items", std.key);
                console.log(items);

// not working
                cover.innerHTML += items;
            }

        }

    }

// HTML Content
<body>
<div class="container center">
    <a href="#" class="add-new">Add Student</a>
    <h1>Student Lists</h1>
    <div class="list-container">
        <div class="list-header">
            <div class="list-title">Name</div>
            <div class="list-title">Age</div>
            <div class="list-title">Gender</div>
            <div class="list-title">Current Course</div>
            <div class="list-title">Grade</div>
            <div class="list-title">Scholarship</div>
            <div class="list-title">Start Date</div>
            <div class="list-title">End Date</div>
            <div class="list-title">Actions</div>
        </div>
        <div class="display-results">
        </div>
    </div>
</div>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/app.js"></script>

Answer 1 · 2017-12-06T15:15:04Z

December 6, 2017 3:15pm

Hi there,

const disp_container = document.getElementsByClassName('display-results') appears to be the issue.

getElementsByClassName returns an array-like object which means to select an element returned from this function we need to access the index.

Change to:

const disp_container = document.getElementsByClassName('display-results')[0]

note the array index at the end.

p.s. I formatted your question. :)

Welcome to the Treehouse Community

Looking to learn something new?

Jayaraman Thiyyadi

Jayaraman Thiyyadi

Element.getElementByClassName and Element.appendChild() not working

1 Answer

Sean T. Unwin

Sean T. Unwin

Jayaraman Thiyyadi

Jayaraman Thiyyadi