Using an event listener inside a class method to call another class method returning undefined
<p>I'm just learning how to use javascript classes. I'm having some difficulty understanding how to make event listeners call methods within a class. Specifically, whenever I call the <strong>this.infoBoxActive</strong> on click, all my variables in the method return undefined.</p>

<p>What I eventually want to do is have a toggle method that onclick switches between true and false and then calls either infoBoxActive or infoBoxDective based on its state. I've been playing around with my code most of the day trying various things but I seem to be sparking the same issue of my variables going undefined. If I call the method direct my everything works great.</p>

<p>I've been using a promise to gather my data from a local JSON file, but I wasn't sure how to return the Object in my resolve so right now I'm calling all my new classes from the promise. I don't know if this would be part of the problem. </p>

<p>I've tried reading some posts of similarity, but either I wasn't able to understand the solution or it wasn't pertaining to my exact problem, so I apologize if this is a duplicate.</p>

<pre><code>class EpisodeInfoBox extends Episode {
  constructor({ title, date, description, tracklist } = {}) {
    super({ title, date, description, tracklist })

    this.titleContainer = document.querySelector('.episode-title');
    this.dateContainer = document.querySelector('.episode-date');
    this.descriptionContainer = document.querySelector('.episode-description');
    this.tracklistContainer = document.querySelector('.episode-tracklist');

    this.infoBoxButton = document.getElementById('infoBoxButton');

    this.infoBoxButton.addEventListener('click', this.infoBoxActive);
  }



  infoBoxActive(){
    this.titleContainer.innerHTML = this.title;
    this.dateContainer.innerHTMLs = this.date;
    this.descriptionContainer.innerHTML = this.description;

    // Creates list-items for track list
    let tracklistHTML = '';
    for (let i = 0; i &lt; this.tracklist.length; i++) {
      tracklistHTML += `&lt;li&gt;${this.tracklist[i].song} - ${this.tracklist[i].artist}&lt;/li&gt;`;
    }
    this.tracklistContainer.innerHTML = tracklistHTML;
  }
}
</code></pre>

<p>my promise</p>

<pre><code>export default function service(url) {
  return new Promise(function(res, rej) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = handleResponse;
    xhr.onerror = function(error) {
      rej(error)
    }
    xhr.send();

    function handleResponse() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var resObject = JSON.parse(xhr.responseText);
          res(resObject)
        } else {
          rej(this.statusText)
        }
      }
    };
  });
}
</code></pre>

<p>My resolve</p>

<pre><code>function callService(){
  service('/data/episodes.json')
    .then(retrieveEpisode)
    .then(makeEpisode)
    .catch(function(e) {
      console.log(e)
    });
}

function retrieveEpisode(episodeArray) {
  return episodeArray[0];

}

function makeEpisode(episode){
  let newEpisode = new Episode(episode);
    newEpisode.setEpisodeImage();
  let newAudioPlayer = new AudioPlayer(episode);
  let newEpisodeInfoBox = new EpisodeInfoBox(episode);
}
</code></pre>