Passing an element into a function that updates it later

Viewed 23

I am making a browser extension that adds a button next to each course listing on my university's course catalog that shows the student reviews of that course on a community forum.

I scrape the reviews from the forum and store the data on a Github repo. Then the extension gets the data from the repo and displays it on the screen.

In the following code, the loop adds a button div to each course. When it is clicked for the first time, it calls getReviews() to get the data on my Github repo. A new div called reviews is made to display the data. Now the course name and reviews is passed to getReviews(), which is supposed to get the data, and update reviews with the data acquired.

I tried to execute getReviews() in Firefox's console and it works as intended. All the alerts are shown, and the reviews are displayed correctly. But when I add the extension and click on the button, getReviews() does not correctly update the contents of reviews. The alerts inside getReviews() are not even shown.

What could be the cause of this issue?

var headers = document.getElementsByClassName("course");
var request = new XMLHttpRequest()
for (var i = 0; i < headers.length; i++) {
    var courseinfo = headers[i].querySelector('.courseinfo');
    let div = document.createElement("div");
    div.setAttribute('class', 'review_btn');
    let spn = document.createElement("span");
    spn.setAttribute('style', 'font-size: 12px; color: #f5425a; font-weight: bold;');
    spn.innerHTML = "[REVIEWS]"
    courseinfo.appendChild(div);
    div.appendChild(spn);
    let j = i;
    div.addEventListener("click", function() {
        if ( headers[j].querySelector('.reviews') === null ) {
            var reviews = document.createElement('div');
            reviews.setAttribute('class', 'reviews');
            var course_name = headers[j].getElementsByTagName("h2")[0].innerHTML.substring(0,4).concat(headers[j].getElementsByTagName("h2")[0].innerHTML.substring(5,9));

            getReviews(course_name, reviews)
            reviews.innerHTML = "text";
            
            headers[j].insertBefore(reviews, headers[j].querySelector('.sections'));
        } else {
            if ( headers[j].querySelector('.reviews').style.display === "none" ) {
                headers[j].querySelector('.reviews').style.display = "block";
            } else {
                headers[j].querySelector('.reviews').style.display = "none";
            }
        }
    } );
}

function getReviews(course, elem){
    request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
                alert(request.responseText);
                reply = JSON.parse(request.responseText)["content"];
                alert(reply);
                alert(atob(reply));
                div.innerHTML = atob(reply)
                return atob(reply);
        }
    }
    request.open('GET', 'https://api.github.com/repos/my_name/review_tracker/contents/reviews/' + course + '.txt');
    request.send(null);
}
0 Answers
Related