[Solved] Need help with JS

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'));
	})()

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like

Hi @Parfum505
If I were you, I’d check what querySelectorAll() returns. You might be surprised.

2 Likes

Oh! I mean querySelector instead of querySelectorAll (((, this mistake have taken 2 hours of my life :sob:. Thank you marzelin :relaxed:

1 Like