Code
<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
var req=new XMLHttpRequest();
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.onreadystatechange=()=>{
if(req.readyState==4 && req.status==201){
const serverResponse=JSON.parse(req.response);
console.log(serverResponse);
document.getElementsByClassName('message')[0].textContent=serverResponse.userName+" "+serverResponse.suffix;
}}
const SentBody=JSON.stringify({userName, suffix: "loves cats"});
req.send(SentBody); //I have used send method
// 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>
The code actually works, but fails the last test, which states:
Your code should use the
send
method.
My code actually uses the send method, and also works fine. After some tweaking I found that using body
instead of SentBody
variable name, the test passes. This is not very clear from the tests or the problem statement that the variable name should be used as given. Please correct the test description or problem statement to use body.send
method. Otherwise make the test independent of the variable name. I would prefer the latter one, personally…
Challenge: Post Data with the JavaScript XMLHttpRequest Method
Link to the challenge: