Why arrow function is not working?

Hi,

This following function works fine.

function loadData() {
  const xhr = new XMLHttpRequest();
  xhr.open('get', 'data.txt', true);
  xhr.onload = function () {
    console.log('ReadyState', this.readyState);
    console.log(this.status);
    if (this.status == 200) {
      document.getElementById('output').innerHTML = `<h1>${this.responseText}</h1>`;
    }
  }
  xhr.send();
}

Select allOpen in new window

However, when I use an arrow function for xhr.onload, the code is not working.
any idea why?  Also how should I fix this issue?

function loadData() {
  const xhr = new XMLHttpRequest();
  xhr.open('get', 'data.txt', true);

  xhr.onload = () => {
    console.log('ReadyState', this.readyState);
    console.log(this.status);
    if (this.status == 200) {
      document.getElementById('output').innerHTML = `<h1>${this.responseText}</h1>`;
    }
  }
  xhr.send();
}

Select allOpen in new window