-
Notifications
You must be signed in to change notification settings - Fork 0
/
load.js
60 lines (55 loc) · 2.14 KB
/
load.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
"use strict";
const container = document.getElementById("container");
const body = document.getElementById("body");
const xhr = new XMLHttpRequest("");
xhr.onload = showGenres;
xhr.open("GET", "result.json")
xhr.send()
function showGenres(e) {
const json = JSON.parse(this.responseText);
buildAndShowDiv(json.tree)
}
function buildAndShowDiv(children) {
container.innerHTML="";
if (children.previous) {
const previousButtonText = document.createTextNode("Previous");
const previousButton = document.createElement("button");
previousButton.className = "previous";
previousButton.node = children.previous;
previousButton.addEventListener("click", showNext);
previousButton.appendChild(previousButtonText);
container.appendChild(previousButton);
const hr = document.createElement("hr");
container.appendChild(hr);
}
children.forEach(element => {
const div = document.createElement("div");
div.className = "elem";
const nameText = document.createTextNode(element.nodeName);
const descriptionText = document.createTextNode(element.description);
const link = document.createElement("a");
link.href = element.link;
link.className = "smallChild";
link.target = "_blank"
link.appendChild(nameText);
const descriptionDiv = document.createElement("div");
descriptionDiv.appendChild(descriptionText);
descriptionDiv.className = "smallChild";
div.appendChild(link);
div.appendChild(descriptionDiv);
if (element.children.length !== 0) {
const nextButtonText = document.createTextNode("Next");
const nextButton = document.createElement("button");
nextButton.node = element.children;
element.children.previous = children;
nextButton.addEventListener("click", showNext);
nextButton.appendChild(nextButtonText);
nextButton.className = "smallChild";
div.appendChild(nextButton);
}
container.appendChild(div);
});
}
function showNext(e) {
buildAndShowDiv(this.node);
}