Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Asynchronous Programming with JavaScript Understanding Promises Perform Cleanup With finally()

Alexey Serpuhovitov
Alexey Serpuhovitov
6,931 Points

.finally() // `TypeError: event.target.remove is not a function`

First of all, I disappointed the way the section for Async programming was explained. Instead of simple exercises we have to break through unknown terms and concepts.

The code from one lesson to another differs, and being inconsistent.

Currently^ my problem is:

btn.addEventListener('click', () => {
  event.target.textContent = "LOADING...";

  getJSON(astrosUrl)
    .then(getProfile)
    .then(generateHTML)
    .catch( (err) => console.log (err))
    .finally( () => event.target.remove())

});

throws

Uncaught (in promise) TypeError: event.target.remove is not a function
    at promises.js:26
    at <anonymous>
(anonymous) @ promises.js:26
Promise.finally (async)
(anonymous) @ promises.js:26

My try to get event object via console log I get XMLHttpRequest Object.

Just solved the problem via a variable bn = event.target

Where is the error?

The full source of code

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');
const imena = {
  'Anatoly': 'Anatoli',
  'Chris': 'Christopher'
};


btn.addEventListener('click', () => {
  event.target.textContent = "LOADING...";

  getJSON(astrosUrl)
    .then(getProfile)
    .then(generateHTML)
    .catch( (err) => console.log (err))
    .finally( () => event.target.remove())
});


function getJSON(url) {

  return new Promise((resolve, reject) => {

      const xhr = new XMLHttpRequest();

      xhr.open('GET', url);

      xhr.onload = () => {
        if (xhr.status === 200) {

          let data = JSON.parse(xhr.responseText);
          resolve(data);

      } else {

        reject(Error('Something wrong'));

      }
    };

    xhr.onerror = () => reject (Error ('network error')); 
    xhr.send();
  });
}

function getProfile(json) {

  const profiles = json.people.map( (person) => {
    let firstName = person.name.split(' ')[0];

    if (imena[firstName] != undefined) {
      person.name = person.name.replace(firstName, imena[firstName]);
    }
    return getJSON(wikiUrl + person.name);
  });
  return Promise.all( profiles );
}



function generateHTML(data) {
  console.log(data);

  data.forEach( (data) => {

  const section = document.createElement('section');
  peopleList.appendChild(section);

  section.innerHTML = `

    <img src= ${data.type === 'standard' ?
    data.thumbnail.source :
    ""}>

    <h2>${data.title}</h2>
    <p>${data.description}</p>
    <p>${data.extract}</p>
  `;
});
}

2 Answers

Steven Parker
Steven Parker
231,184 Points

The global "event" variable (window.event) is still used by most browsers, but MDN recommends strongly against using it. Instead, always declare the event object as the parameter of a handler function.

But another issue with not passing it as a parameter is that the value might change before an asynchronous callback that references it gets executed. I'd guess that was the issue if you were able to fix it by creating a variable for the target.

I think you forgot to pass in event or e as the parameter for your btn click handler, as in:

btn.addEventListener('click', (event) => { ........

without that parameter you can't call event.target.remove() because the computer doesn't know what event is...