2
divに新たに作成した要素を追加しようとしていて、divをドキュメントフラグメントに追加しようとしていますが、期待通りに機能しません。私が紛失しているものを特定するのを手伝ってください。なぜ私のappendChildはcreateDocumentFragmentで動作しませんか？
//array of values to look up
let channels = ["channel1", "channel2", "channel3","channel4","channel5","channel6","channel7","channel8","channel9","channel10","channel11","channel12","channel13","channel14","channel15","channel16"];
//jsonp request function defined
function streamRequest() {
//identify DOM elements for final appendChild
let docFrag = document.createDocumentFragment();
let container = document.getElementById("main-container");
//create container and elements for the acquired information
let div = document.createElement("div");
let image = document.createElement("img");
let p = document.createElement("p");
let p1 = document.createElement("p");
let p2 = document.createElement("p");
//variables for request responses
let logo;
let name;
let status;
let game;
channels.forEach(function channelsRequest(channel){
$.getJSON("https://api.twitch.tv/kraken/streams/" + channel + "?callback=?", function callback(data) {
if(data.stream === null){
status = "Offline"
game = "Offline"
} else if (data.stream != null) {
status = "Online"
game = data.stream.game
}
console.log(channel, status, game);
$.getJSON("https://api.twitch.tv/kraken/channels/" + channel + "?callback=?",function logoRequest(data) {
name = data.display_name;
if(data.logo === null) {
logo = "http://www.logowik.com/uploads/images/379_twitch.jpg"
} else if (data.logo != null) {
logo = data.logo
}
//set attributes and inner HTML for new elements
image.setAttribute("src",logo);
image.setAttribute("alt","photo of channel's image");
image.className = "image";
p.innerHTML = name;
p.className = "name";
p1.innerHTML = status;
p1.className = "status";
p2.innerHTML = game;
p2.className = "game";
//append elements to the div
div.appendChild(image)
div.appendChild(p)
div.appendChild(p1)
if(status === "Online"){
div.appendChild(p2)
}
div.className = "tv-block";
docFrag.appendChild(div);
console.log(data, name, logo, docFrag);
});
});
});
//append final document fragment to the DOM
container.appendChild(docFrag);
};
`
I understand、あなたがフラグメントにdiv要素を追加し、その後、DIVにすべてを追加することができるはずです何から。コードを実行すると、DOMに何も修正されません。スコープが原因である可能性があります。または、2回目のjsonリクエストが正しく設定されていないと思われます。