javascript - Why is it that the append method duplicates my on-click event results event though i set the div to empty before it is clicked? -
a loop runs through array if usernames request api each of them. div id of streameroffline set empty.now click button offline , list of users offline.however when click button again data gets appends previous on click event , doesn't empty.could me out.
$(document).ready(function() { // solution call function var streamers = ["streamerhouse","esl_sc2", "freecodecamp", "test_channel"]; var offlinechannels = ""; $('#streameroffline').empty(); //getting twtich requests (i=0; < streamers.length; i++){ $.getjson('https://wind-bow.glitch.me/twitch-api/streams/'+streamers[i]+'', calldata); } //end loop $('#streameroffline').empty(); function calldata(data) { $('#streameroffline').empty(); $(document).on('click', '#offlinenow', function(){ if(data["stream"] === null){ offlinechannels = "<p>"+data["_links"]["channel"]+"</p>"; $('#streameroffline').append(offlinechannels); } }); $(document).on('click', '#onlinenow', function(){ if (data["stream"] !== null ){ if ( $('#streameronline').text() === null){ alert("empty"); } $('#streameronline').append("<p>"+data["stream"]["channel"]["status"]+"</p>"); } }); } }); update: tried setting id empty inside if statement because each time loop runs emptied. leaving me 1 of 2 results expected.
$(document).on('click', '#offlinenow', function(){ if(data["stream"] === null){ $('#streameroffline').empty(); offlinechannels = "<p>"+data["_links"]["channel"]+"</p>"; $('#streameroffline').append(offlinechannels); } });
always append after clearing previous data.
$(document).on('click', '#offlinenow', function(){ if(data["stream"] === null){ offlinechannels = "<p>"+data["_links"]["channel"]+"</p>"; $('#streameroffline').empty().append(offlinechannels); } });
Comments
Post a Comment