How to query select html made with javascript, and make more html?

JavaScript
1

I made a string of html with javascript and I am adding it to the dom. I want to select an element from that html string with a query selector so I can make another string of html in another if statement. When I try to do this the console says the selected element is null. Is it possible to select a javascript created html element? Here is the function with the code:

 function streams(){
    if(this.readyState === XMLHttpRequest.DONE){
      if(this.status === 200){
        let data = JSON.parse(this.response);
        console.log(data.stream);
const main = document.querySelector('.center-box');
 const desc = document.querySelector('.gamers');
if(data.logo){
          main.innerHTML += ` <div class ='gamers'>
    <a href='${data.url}' target='blank'><img class='logo' src='${data.logo}'></a>
    <h4 class='streamer'>${data.display_name}</h4>
  </div>`;
  
}
        if(data.stream){
  desc.innerHTML += `<p class='desc'></p>
    <h6 class='online'>online</h6>`
} else {
  desc.innerHTML += `
<h6 class='offline'>offline</h6>
`
}

      } 
    }
  }

I am trying to make the const desc select the class .gamers which is made by javascript under an if statement.

3

I didn’t realize where I placed the selector mattered. I put the selector under my if statement, but my console keeps return 'reference error disc is not defined. And now I’m getting a bug, even though data.stream is false, it is returning true with the html, and the html for that is only showing up on the first div, not the other 3.
5

Thanks, I’m not getting a refence error anymore for desc, I moved it after the if statement where I create the .gamers class.
I am still having trouble using the desc selector in my if statement though with if(data.stream). I tried debugging with console.log using true or false, and I am getting both logged in the console, but my html isn’t being made even though the reference error for disc is gone. Do you know why this is happening? I’ve tried moving my selector for const inside both of my if statements, but it only doesn’t show an error when it is just in the scope of the streams function, outside of both if statements that I made.

6

I can’t figure it out so I’m just going to remake my code. I’m using .createElement now to make the html for my json objects and so far its working out nicely.

7

alright when I use .createElement it works, it looks messy because I’ve been ignoring the css, but it works so far. I still have no idea why the previous method I tried didn’t work, with all my html in a string and I would appreciate if anyone could explain why it wasn’t.

EDIT: nevermind still not working, but a step forward since the true statement isn’t completely broken.

9

I couldn’t find out how to make it work in the streams function, so now I have two seperate functions. The streamers function now only takes the response data from makeRequest, and now the function streams takes the response data from my ajax request with the data.streams object. in streams function now with my if statement I am correctly getting who is online and offline now, but I have an issue with how it is positioned in my html which I’m not sure how to fix. I want to put the online or offline html strings from my streams function into the div with the class .gamers, made from my other streamers function with a different ajax call. I can’t use a querySelector to get .gamers because it shows a reference error. append child to center-box doesn’t work, so now I’m stuck with the result of the if statement being randomly placed across the center-box each time it is reloaded. I tried passing .gamers as a parameter to the streamers function, streamers(gamers), but this showed an httprequest object strangely, and I don’t really know how to solve it.

12

alright I made a variable called div to query select the id of the streamers, and I passed it into the makeRequest2 function and the streams function, and I made username = data.name and also passed it into those functions, but both of those are returning as undefined when I try to use them in the streams function, I don’t know why.

const div = main.querySelector(#${data.name});
let username = data.name;
makeRequest2(username, div)

streams(httpRequest, username, div)
and username and div return undefined in streams.

14

I’m having trouble with my div in streams function. I am trying to set div’s inner html equal to the online and offline variables, but the console keeps showing that div is undefined. I am console.logging div, and in the console it shows the html div tag with the correct id’s, so I don’t know why it keeps showing undefined. The offline and online true or false statements are working correctly. And even though the console is showing that the divs are undefined, only one of my users divs is updated to offline. Why is this happening?

EDIT: only the last user id html that is returned from the ajax request is updated with either online or offline, while the rest of the users html are blank and the console shows div is undefined.

15

I saw that I was calling makeRequest2 2 times in my streamers functoin, fixed that and now I’m not getting an error that div is undefined, but I still have the problem that only one streamers html is updated in my list. I’m not sure how to approach this to fix it, tried a forEach loop and a for loop and that did nothing. I think next time I’ll do this using promises, this is getting really too messy to read and work with, and another guy helped me solve this whole problem already using async functions, but I just wanted to finish it using ajax requests, even though its messy.

17

Been looking at this for 3 hours trying to think of a solution and it was this simple… I was thinking of just getting rid of the username argument because I wasn’t using it actually, but I didn’t expect it to work as a solution. Thanks again randelldawson. After all of this mess I’m done with using ajax, its too messy, time to learn promises.