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
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
231,275 PointsThe 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.
Daniel Ahn
Front End Web Development Techdegree Student 8,575 PointsI 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...