Post data with JavaScript XMLHttpRequest method

JavaScript
1

Tell us what’s happening:
Need help with this

Your code so far


<script>
document.addEventListener('DOMContentLoaded', function(){
  document.getElementById('sendMessage').onclick = function(){

    const userName = document.getElementById('name').value;
    const url = 'https://jsonplaceholder.typicode.com/posts';
    // Add your code below this line

req = new XMLHttpRequest();
req.open("POST",url,true);
req.setRequestHeader('content-Type','text/pain');
req.onreadystatechange=function(){if (req.readyState==4 && req.status == 200){document.getElementByClassName('message')[0].innerHTML=req.responseText;};}
req.send(userName);

    // 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 (Linux; Android 5.1; Lenovo P1ma40) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Mobile Safari/537.36.

Challenge: Post Data with the JavaScript XMLHttpRequest Method

Link to the challenge:

2

Did you mean text/plain?

1 Like
3

I fixed that before you point it out still not working

4

Hello there,

Your code has a few issues:

  1. Capital "C" for “Content-Type”
  2. Why have you put ‘text/plain’? Use the example in the lesson.
  3. You are missing the ‘charset’ declaration. Again, use the example in the lesson.
  4. Read the test messages you are failing:

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

  • You are not using textContent
  • You are not adding the correct text.
  1. You should be parsing the data. Again, look at the example in the lesson.

It might be easier for you to reset the lesson, and start again.

I hope this helps

1 Like