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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Turandeep Munday](https://secure.gravatar.com/avatar/a76949e44a8aed6d2cfe63b78fe1c194?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Turandeep Munday
6,047 PointsCan't set ajax element even though when i run the code `document.getElementById('ajax').innerHTML = xhr.responseText;`
My code copies the teachers code, however when i run the code in the browser it doesn't work.
after running in browser when i manually set the elements using the console document.getElementById('ajax').innerHTML = xhr.responseText;
- this works and i can see that the response returns a 200 from XHR/Fetch portion of the console
But I am unsure why when i recieve this response the text isn't updating the responseTExt
code below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<title>AJAX with JavaScript</title>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
document.getElementById('ajax').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'sidebar.html');
xhr.send();
</script>
</head>
<body>
<div class="grid-container centered">
<div class="grid-100">
<div class="contained">
<div class="grid-100">
<h1>Bring on the AJAX</h1>
<ul id="ajax">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
1 Answer
![josephweiss2](https://uploads.teamtreehouse.com/production/profile-photos/11652095/micro_configuration.jpg)
josephweiss2
7,094 PointsTry this:
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('ajax').innerHTML = xhr.responseText;
}
};
Let me know if it still doesn't work
Steven Parker
230,688 PointsSteven Parker
230,688 PointsA better way to share workspace code (particularly when multiple files are involved) is to make a snapshot of your workspace and post the link to it. This allows others to replicate the issue and provide a more complete and accurate answer.