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
<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
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader(
'Content-Type',
'application/json; charset=UTF-8'
);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 201) {
const serverResponse =
JSON.parse(xhr.response);
document.getElementsByClassName('message')[0].textContent = `${serverResponse.userName} ${serverResponse.suffix}`;
}
};
const body = JSON.stringify({ userName: userName, suffix: 'loves cats!' });
xhr.send(body);
// 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 (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: