main.js

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");

  var nav = document.querySelector("nav");
  nav.addEventListener("click", function(event) {
    var selectedTab = document.querySelector(".selectedTab");
    if(selectedTab) selectedTab.classList.toggle("selectedTab");
    console.log(event.target.nodeName);
    if(event.target.nodeName === "SPAN") {
        event.target.parentElement.click();
        console.log("SPAN clicked");
    }
    else event.target.classList.toggle("selectedTab");
  });

  // http://jsonplaceholder.typicode.com/posts/1

  function ajax() {
    var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() {
    var result = this.responseText;  });;
    oReq.open("GET", "http://www.example.org/example.txt"); oReq.send();
    return result;

    }

  var body = document.querySelector("body");

  function removeEleDisplay() {
    var sections = document.querySelectorAll(".eleDisplayShow");
    for (section of sections) {
      section.classList.toggle("eleDisplayShow");
    }
  }

  function handleTextBox(text_box, data) {
    var title = data["title"];
    var body = data["body"];

    var str = '<div class="myName" ><%=title%> </div>' +
    '<div class="myDesc" ><%=body%> </div>';

    var template = _.template(str);
    var content = template({title: title, body: body});
    text_box.querySelector("li").innerHTML = content;
  }

  function ajaxResponse(text_box, url) {
    if(text_box.querySelector(".myName").innerHTML.length > 1) return;
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function() {
      var result = this.responseText;
      var data = JSON.parse(result);
      console.log(data);
      handleTextBox(text_box, data);
    });
    oReq.open("GET", url);
    oReq.send();
  }

  var position = document.querySelector("#position");
  position.addEventListener("click", function(event) {
    var text_box = document.querySelector("#my_position");
    removeEleDisplay();
    text_box.classList.toggle("eleDisplayShow");
    var url = "http://jsonplaceholder.typicode.com/posts/1";
    ajaxResponse(text_box, url);
  });

  var friend = document.querySelector("#friend");
  friend.addEventListener("click", function(event) {
    var text_box = document.querySelector("#my_friend");
    removeEleDisplay();
    text_box.classList.toggle("eleDisplayShow");
    var url = "http://jsonplaceholder.typicode.com/posts/2";
    ajaxResponse(text_box, url);
  });

  var theme = document.querySelector("#theme");
  theme.addEventListener("click", function(event) {
    var text_box = document.querySelector("#my_theme");
    removeEleDisplay();
    text_box.classList.toggle("eleDisplayShow");
    var url = "http://jsonplaceholder.typicode.com/posts/3"
    ajaxResponse(text_box, url);
  });

  var news = document.querySelector("#news");
  news.addEventListener("click", function(event) {
    var text_box = document.querySelector("#my_news");
    removeEleDisplay();
    text_box.classList.toggle("eleDisplayShow");
    var url = "http://jsonplaceholder.typicode.com/posts/4";
    ajaxResponse(text_box, url);
  });
});