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
chloeguttridge
16,608 PointsHow to complete check for correct ready state task
I'm struggling to complete this I understand the videos; but I can't get the final bit. Using .innerHTML to set the sidebar element to the servers response. I don't understand what I am supposed to put here. Evertyhing I have tried just throws an error and keeps saying Task 1 no longer passing I have to go back to the start again.
Could someone explain what I am doing wrong?
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
return xhr.status === 200;
}
document.getElementById('sidebar').innerHTML = xhr.response;
};
xhr.open('GET', 'sidebar.html');
xhr.send();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX with JavaScript</title>
<script src="app.js"></script>
</head>
<body>
<div id="main">
<h1>AJAX!</h1>
</div>
<div id="sidebar"></div>
</body>
</html>
6 Answers
trio-group I.AM
25,713 PointsI see now. You are writing your code outside of your conditional statement. This code will pass:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
return xhr.status = 200;
document.getElementById('sidebar').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'sidebar.html');
xhr.send();
What I meant by 'nesting' is that the check if the status code is OK should be nested inside the readyState check (since the challenge instructions state 'also TEST if the server responds with a status code of OK'). So strictly speaking, the following code is what TH is looking for:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById('sidebar').innerHTML = xhr.responseText;
}
}
};
xhr.open('GET', 'sidebar.html');
xhr.send();
Yours will pass too though, as soon as you put your code in your conditional statement.
Hope this helps!
trio-group I.AM
25,713 PointsHey,
make sure you are reading the instructions carefully. First of all, you need to "check" whether the server responds with a status code of 200 (hint hint conditional statement). If so, THEN you would want to insert the response as HTML, but while you're at it, don't forget to use the correct property on the response object which returns the text of the response.
chloeguttridge
16,608 PointsI appreciate the response. I have a conditional statement in my code which passes that part of the task. The only part that doesn't pass the task is the final part with innerHTML so I'm not sure which bit is wrong if the rest of the task passes?
trio-group I.AM
25,713 PointsHey! Sorry for the late response.
You need to nest your conditional statements. Also, use responseText to parse the data as innerHTML.
Hope this helps.
chloeguttridge
16,608 Pointsvar xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
return xhr.status = 200;
}
document.getElementById('sidebar').innerHTML = xhr.responseText;
};
xhr.open('GET', 'sidebar.html');
xhr.send();
Nope I cannot get it to pass the final part and I still don't understand why. I've tried responseText but that doesn't work. I don't understand what you mean by nesting conditional statements there is only one? The rest of the task passes its literally the final part that fails.
chloeguttridge
16,608 PointsOh I see so what I had written was correct just in the right place. Now it passes and that does make sense. Thanks.