ajax_data_retrieve_problem.js

// DOM cache
var nodes={
  output:  document.getElementsByClassName('output')[0],
  getDataBtn: document.getElementsByClassName('getDataBtn')[0],
};

var AJAXcall = function(dataURL){
  // create a XMLHttpRequest object
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :
          new ActiveXObject("Microsoft.XMLHTTP");

  // initializes the request:
  xhr.open("GET", dataURL);

  // sends the request:
  xhr.send();

  // on ready (4)
  let res;
  xhr.onreadystatechange = function(){
    console.log(`@@@@@@@@@state: ${this.readyState}`);
    if( this.readyState == 4){
      if( this.status == 200){
        res = xhr.response;
      }
    }
  }

  return res;
};

function outputData(data){
  nodes.output.innerHTML = data;
}


nodes.getDataBtn.addEventListener('click', function(){
  let data = AJAXcall('/loremIpsum.txt');
  nodes.output.innerHTML = data;
  // Why not working!!!
});