It is not working what is wrong

JavaScript
1

Tell us what’s happening:

HELP

Your code so far


<script>
document.addEventListener('DOMContentLoaded',function(){
  document.getElementById('sendMessage').onclick=function(){
  
    var userName=document.getElementById('name').value;
    // Add your code below this line
let xhr = new XMLHttpRequest;
xhr.open('POST',url,true);
xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8'

)
xhr.onreadystatechange = () => {
if(xhr.readyState === 4 && xhr.status == 201){
  let serverResponse = JSON.parse(xhr.response)
  document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix
}
}
let body = JSON.stringify({userName: userName,suffix: 'Loves Cat'});
xhr.send();
    // 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 Friends</h1> 
<p class="message box">
Reply from Server will be here
</p>
<p>
<label for="name">Your name:
  <input type="text" id="name"/>
</label>
<button id="sendMessage">
  Send Message
</button>
</p>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Post Data with the JavaScript XMLHttpRequest Method

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section. Please put meaningful content in this section when you post on the forum.

The more information you give us, the more likely we are to be able to help.

3

i just dont get why it is not passing

4

What have you tried? What do the failing tests say? What do any error messages say?

The more work you put into forming your question, the more work respondents can put into answering your question.

Technical discussions about debugging are critical in programming professionally, and it is an essential skill set to build.

5

the failing tests say Your code should create a new XMLHttpRequest .
Your code should use the setRequestHeader method.
Your code should use the send method.
AND I DID ALL OF THEM

6

There is no need to shout at me : )

The sample shows that you define an XMLHttpRequest by

const xhr = new XMLHttpRequest();

Did you do this?

1 Like
7

i did let not const is that what made it wrong?

8

Given:

const xhr = new XMLHttpRequest();

Yours:

let xhr = new XMLHttpRequest;

I see one very big difference.

9

oh yeah the
() is that the difference

1 Like
10

  1. XMLHttpRequest is a constructor, it needs to be invoked ().

  2. In setRequestHeader you need a space between application/json; and charset=UTF-8

  3. The xhr.send method should send the body.

1 Like
11

wait how do i do that?

12

How do you do what? You have to be more specific than that.

13

the xhr.send thing how do i do that

14

Look at the example code, you can see how.

15

ok that works and i did a space and it doesnt work

16

in the application/json thing

17

is it a good idea to try on a different browser

18

We would need to see your new code.

This is how it looks in the example, you can just copy and paste from the example code.

xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');