Disappearing element after parsing JSON

Question

I’ve got an interesting problem: I’ve written a a HTML/JS project that grabs information via XMLHttpRequest from the Scratch website. The goal is to let someone type in their username and see the description from their profile on Scratch, using JSON.parse. It appears to work, but the description appears briefly and disappears. I’ve scanned my code but still haven’t been able to keep the description there. I’m not going to post the code on Stack Overflow (too much) but you can view my code and the output at https://getthatdesc--micahlt.repl.co/ . If anyone can help, I’d really appreciate it!

Welcome to Stackoverflow. Your code should be posted **here**. The site has ample facilities for formatting code and even creating executable examples as part of your question. — Pointy, Dec 05 '19 at 16:27
My first guess would be that the form you are using is defaulting to refreshing the page whenever the data is submitted, in the function that gets called try adding `e.preventDefault()` to prevent the page from refreshing — Kevin Hernandez, Dec 05 '19 at 16:28
@Pointy Okay, sorry. Didn’t know that was a rule. Will do in the future. — micahlt, Dec 05 '19 at 16:32
@KevinHernandez That would work, but unfortunately I didn’t write the code with an event listener. I used the `onsubmit` form attribute. — micahlt, Dec 05 '19 at 16:33
@micahlt Your function should look like this: `function showInfo(){//code here` change it to this `function showInfo(e){e.preventDefault(); //rest of code here}` — Kevin Hernandez, Dec 05 '19 at 16:35
appears and disappears is typical result of page navigation due to a link or form submission. — epascarello, Dec 05 '19 at 16:36

score 1 · Accepted Answer · answered Dec 05 '19 at 16:37

You are submitting a form, the default behavior is to refresh the page whenever the form gets submitted

Your code:

function showInfo() {
// set xhttp as an identifier of XMLHttpRequest
var xhttp = new XMLHttpRequest();
// every time the state of the request changes, evaluate
xhttp.onreadystatechange = function() {
  // These codes mean that the request is finished
  if (this.readyState == 4 && this.status == 200) {
    // Parse the JSON response
    var userParsed = JSON.parse(this.responseText);
    // log the response to the console
    console.log(userParsed);
    // get the description
    var description = userParsed.profile['bio'];
    // log description to the console
    console.log(description);
    // make the output visible to the user
    document.getElementById("info1").innerHTML = description;
  };
};
xhttp.open("GET", "https://cors-anywhere.herokuapp.com/api.scratch.mit.edu/users/" +document.getElementById('usrname').value, false);
xhttp.send();
}
/* fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json)) */

This needs to change to:

function showInfo(e) {
  e.preventDefault();
  // set xhttp as an identifier of XMLHttpRequest
  var xhttp = new XMLHttpRequest();
  // every time the state of the request changes, evaluate
  xhttp.onreadystatechange = function() {
    // These codes mean that the request is finished
    if (this.readyState == 4 && this.status == 200) {
      // Parse the JSON response
      var userParsed = JSON.parse(this.responseText);
      // log the response to the console
      console.log(userParsed);
      // get the description
      var description = userParsed.profile["bio"];
      // log description to the console
      console.log(description);
      // make the output visible to the user
      document.getElementById("info1").innerHTML = description;
    }
  };
  xhttp.open(
    "GET",
    "https://cors-anywhere.herokuapp.com/api.scratch.mit.edu/users/" +
      document.getElementById("usrname").value,
    false
  );
  xhttp.send();
}
/* fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json)) */

I’m slightly confused... do I need a parameter to put in the `showInfo` function? e.g., `showInfo(usrname)`. — micahlt, Dec 05 '19 at 17:53
No, what I wrote for you should work. When the function gets called an event parameter is passed into the function automatically `e` is short for `event` so: `event.preventDefault()` Read up on [Events](https://www.w3schools.com/js/js_events.asp) — Kevin Hernandez, Dec 05 '19 at 17:55
Okay, thanks! I’m slightly new to JavaScript and I appreciate the help. — micahlt, Dec 05 '19 at 18:00

Disappearing element after parsing JSON

1 Answers1