JSON APIs and AJAX code passes, but browser doesn't show result on click

#1

So exactly as the title. I have already passed these challenges, but it’s eating me up inside that I’m not seeing the results I want on the browser. Not sure what’s wrong.

<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">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

I just checked the console:

error
error1365×662 71.8 KB

I pass the challenge:

pass
pass1365×673 54.9 KB

#2

The challenge needs to be updated, because the example code should declare the variables req and json. The code is silently failing when the button is clicked, due to the fact the variables are not defined explicitly. I will submit a PR to fix. I have updated the 'Get a hint" linked page to reflect the correct solution.

#3