Button duplicated info . How do i make that stop

Button duplicated info . How do i make that stop
0.0 0

#1

This topic relates to the twitch API. I have three buttons that is supposed to show online,offline and all users. It works on first click. However if you click on the button multiple times the information repeats.
Here is the link to my codepen.

Also, If you have any suggestions on how to improve my Jscript please let me know.


#2

You’re appending the data on top of old data into the same html elements. You can remove old elements by looping through the children of those containers and using remove() a method of the HTMLElementNode.

As for improving your code, I would take your event listeners out of your twitch function. Make the twitch function only request your data and return that data. You can have it update a global object each time it’s called or pass in arguments to filter the data you want, but have it only do one thing. Make separate functions for each container. One to accept a collection of data (your twitch data) and append that collection to the appropriate html parent, but not before resetting the children of that container. As for the popular campers, you don’t need to append anything to that multiple times. I would just write that information in HTML actually, and toggle the class on it. That data doesn’t change.