Changing className after insertAdjacentHTML

Question

I am trying to change my className after the insertAdjacentHTML() function. I am using an AJAX request for this and the route /reviewcombine is from my backend JavaScript codes.

My codes:

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        .checked {
            color: orange;
        }
    </style>
    <script>
        function getTestByID() {
            var request = new XMLHttpRequest();

            //The "/reviewcombine" here is the route from my backend JavaScript
            request.open("GET", "/reviewcombine", true);
            request.setRequestHeader("Content-Type", "application/json");
            request.onload = function () {
                var tests = JSON.parse(request.responseText);

                var exampleID = 1
                var totalTests = tests.length;

                var testlistings = document.getElementById("testListings");

                for (var testCount = 0; testCount < totalTests; testCount++) {

                    if (tests[testCount].reviewResId == exampleID) {

                        var username = tests[testCount].username;
                        var rating = tests[testCount].rating;

                        var testItem = '<div class="eachtest">\
                                    <h5 style="padding:6px; background-color: #E1ECF4; display: inline-block">@'+ username + '</h5>\
                                    <div style="margin-top: 1px; padding-left: 3px;">\
                                        <p style="color: rgb(255, 136, 0); font-size: 16px; display: inline;">'+ rating + '</p>&nbsp;\
                                        <span class="fa fa-star" id="test_1"></span>\
                                        <span class="fa fa-star" id="test_2"></span>\
                                        <span class="fa fa-star" id="test_3"></span>\
                                        <span class="fa fa-star" id="test_4"></span>\
                                        <span class="fa fa-star" id="test_5"></span>\
                                        &nbsp;\
                                    </div>\
                                </div>';

                        // insertAdjacentHTML() to insert the HTML codes.                  
                        testlistings.insertAdjacentHTML('beforeend', testItem);

                        //cant change after insertAdjacentHTML????????????????????
                        var star = tests[testCount].rating

                        if (star == 0) {
                            return;
                        }
                        else if (star == 1) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                        }
                        else if (star == 2) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                        }
                        else if (star == 3) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                            document.getElementById('test_3').className = "fa fa-star checked"

                        }
                        else if (star == 4) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                            document.getElementById('test_3').className = "fa fa-star checked"
                            document.getElementById('test_4').className = "fa fa-star checked"
                        }
                        else {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                            document.getElementById('test_3').className = "fa fa-star checked"
                            document.getElementById('test_4').className = "fa fa-star checked"
                            document.getElementById('test_5').className = "fa fa-star checked"
                        }
                    }
                }
            }
            request.send();
        }
    </script>
</head>

<body onload="getTestByID()">
    <div id="testListings"></div>

</body>

</html>

Here, I am trying to change my stars to orange and display it based on the ratings value.

However, doing this after the insertAdjacentHTML function just changes the classNames permanently. The subsequent loops are using the fa fa-star checked class instead of the fa fa-star class that they should be using. (Doing it before the insertAdjacentHTML function is also not possible)

This is an example of the output I am getting:

Can someone please help me to identify what is the error here? Any relevant sources would also be a big help. Thanks a lot!

I fixed it! Instead of assigning the className in my `if-else` I call the `var testItem` in it and do the `insertAdjacentHTML` after the `if-else` ends. — CBCH, Feb 14 '20 at 03:51

score 0 · Answer 1 · answered Feb 14 '20 at 03:36

0

Inside the loop you are assigning a hard-coded id:

<span class="fa fa-star" id="test_1"></span>

document.getElementById('test_1") is only going to return the first instance of it, because id is supposed to be unique. Try making the id dynamically.

answered Feb 14 '20 at 03:36

Sydney Y

2,912
3
9
15

Changing className after insertAdjacentHTML

1 Answers1