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 AJAX Basics AJAX Concepts A Simple AJAX Example

Turandeep Munday
Turandeep Munday
6,047 Points
Posted by Turandeep Munday
Turandeep Munday
6,047 Points

Can'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>
Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 Points

A 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.

1 Answer

josephweiss2
josephweiss2
7,409 Points
josephweiss2
josephweiss2
7,409 Points

Try 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