Get JSON with the JavaScript XMLHttpRequest Method - Last test won't pass

JavaScript
1

Tell us what’s happening:
I am getting the required results: the json output is being displayed instead of the “The message will go here” text when I click the button, but my code will not pass the last test “Your code should get the element with class message and change its inner HTML to the string of JSON data.” Is there something wrong with my code, or with the test?

Your code so far


<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      // Add your code below this line
      req=new XMLHttpRequest();
      req.open("GET",'/json/cats.json',true);
      req.send();
      req.onload=function(){
        json=JSON.parse(req.responseText);
        document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
      };

      // Add your code above this line
    };
  });
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1> 
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method

2

Hello ^^
Just copy-pasted your code and it worked for me, so the code is fine :slight_smile:

3

I’ve tried submitting it many times, and the test just won’t work - very frustrating. I guess I’ll just keep trying. Thanks for your feedback.

4

Have you tried with another browser/ clean your cache ? Probably something is messed up with the test^^
I just noticed that the json variable has no declaration (just using a let could restrict its scope)^^

5

Yes I tried that. I finally got it to work - there was a bit of stray whitespace in one of the lines that looked like it wrapped to the next line. Thank you.

1 Like