Post Data with the JavaScript XMLHttpRequest Method - Test

Tell us what’s happening:
All the tests but one passes:

Your code should get the element with class message and change its textContent to “userName loves cats”

The closest post to this is Post Data with the JavaScript XMLHttpRequest javascript challenge, but it doesn’t contain an anwer.

My output is:

  • I have checked for extra spaces and not enough spaces.
  • I tried to wholesale copy the tutorial code and run that with the same results.
  • I’ve tried to use innerHTML instead of textContent.
  • I’ve tried to hardcode the value of setContent.
  • I’ve tried declaring a variable and creating the string to set first.

Any help on what I’m doing wrong here would be much appreciated.

Your code so far

document.addEventListener('DOMContentLoaded', function(){
  document.getElementById('sendMessage').onclick = function(){
    const userName = document.getElementById('name').value;
    const url = '';
    // Add your code below this line
    const xhr = new XMLHttpRequest();'POST', url, true);
      'application/json; charset=UTF-8'
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 201) {
        const serverResponse = 
        document.getElementsByClassName('message')[0].textContent = `${serverResponse.userName} ${serverResponse.suffix}`;
    const body = JSON.stringify({ userName: userName, suffix: 'loves cats!' });


    // Add your code above this line

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;

<h1>Cat Friends</h1>
<p class="message box">
Reply from Server will be here
<label for="name">Your name:
  <input type="text" id="name"/>
<button id="sendMessage">
  Send Message

Your browser information:

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

Challenge: Post Data with the JavaScript XMLHttpRequest Method

Link to the challenge:

I forced refreshed the page, and tried again. That sorted it out.