Hi! I almost finished Twitch.TV project, but now stuck with small problem in my code. Console.log shows me " ul.appendChild is not a function " when I try to append “li” to “ul” in this code:
const users = [ "ESL_SC2", "OgamingSC2", "freecodecamp"];
let ul = document.querySelectorAll('main ul'); // here i want to append userLi
// this function creates userLi
function createdUserLiNode(user, data, requestType) {
let userStatus = requestType === 'channels' ? 'offline' : 'online' ;
let userLi = document.createElement('li');
let a = '';
a += '<a href="#">' + (data.display_name || user);
a += '</a>';
userLi.className = userStatus;
userLi.innerHTML = a;
return userLi;
}
//this request calls createdUserLiNode()
function requestUsers(user, requestType) {
const urlAPI = "https://cors-anywhere.herokuapp.com/https://wind-bow.gomix.me/twitch-api/";
let url = urlAPI + requestType + '/' + user + "/";
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var data = JSON.parse(request.responseText);
if (requestType === 'channels') {
let li = createdUserLiNode(user, data, requestType);
ul.appendChild(li); // **here is problem**
} else if (requestType === 'streams'){
if(data.stream !== null) {
let li = createdUserLiNode(user, data.stream.channel, requestType);
ul.appendChild(li); // **here is problem**
} else if(data.stream === null){
requestUsers(user, 'channels');
}
}
} else {
var data = JSON.parse(request.responseText);
//console.log(user + ": isn't here");
//console.log(data);
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
} //end of requestUser
//call request for each user in userList
(function createUsersDOMList(users) {
users.forEach(user => requestUsers(user, 'streams'));
})()