Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Posting Data with fetch()

Posted by Carlos Chavez
Carlos Chavez
5,691 Points

Why replacing 'document' with 'form' gives different result?

Hi, Writing the 'postData' function as Guil shows in the video, I accidentally wrote 'form' instead of 'ducument'. It threw an error because of it. So I was wondering, why is that? I though it would have the same effect, and that it actually was more specific at the moment of setting the event listener. Code below:

function postData(e) {
  e.preventDefault();
  const name = document.getElementById('name') // < -- here
  const comment = document.getElementById('comment'); // < -- and here

  fetch('https://jsonplaceholder.typicode.com/comments')
    .then(checkStatus)
    .then( res => res.json())
    .then( data => console.log(data))
}

3 Answers

Carlos Chavez
Carlos Chavez
5,691 Points

Thanks for you answer Bihari!

I actually found in the the reason it only works with document, it has to do with the 'getElementById'. Here's a reference from WDM web docs:

"Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll(), getElementById() is only available as a method of the global document object, and not available as a method on all >element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for >"local" versions of the function. "

Bihari Sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
Bihari Sharma
Front End Web Development Techdegree Student 235 Points
Bihari Sharma
.a{fill-rule:evenodd;}techdegree
Bihari Sharma
Front End Web Development Techdegree Student 235 Points

ifwe wite document then it will think the whole document as an object if u write any variable like 'form' instead of document it will do your work inside the it see my code below:

  1. if we define a variable name li can u see that inside 'li' variable we write document.querySelector it means that it will select the whole document as an object and find one li from the whole html body

var li = document.querySelector('li');

  1. if we want to search within 'ul' not the whole documnet the we can write like this,it means that first we select the parent 'ul' tag inside the whole html then made another variable name 'li' and store its value as ul.querySelector('li') it means that it will search inside the 'ul' variable for 'li' var ul = document.querySelector('ul'); var li = ul.querySelector('li')
Bihari Sharma
seal-mask
.a{fill-rule:evenodd;}techdegree
Bihari Sharma
Front End Web Development Techdegree Student 235 Points
Bihari Sharma
.a{fill-rule:evenodd;}techdegree
Bihari Sharma
Front End Web Development Techdegree Student 235 Points

ifwe wite document then it will think the whole document as an object if u write any variable like 'form' instead of document it will do your work inside the it see my code below:

  1. if we define a variable name li can u see that inside 'li' variable we write document.querySelector it means that it will select the whole document as an object and find one li from the whole html body var li = document.querySelector('li');

  2. if we want to search within 'ul' not the whole documnet the we can write like this,it means that first we select the parent 'ul' tag inside the whole html then made another variable name 'li' and store its value as ul.querySelector('li') it means that it will search inside the 'ul' variable for 'li'

var ul = document.querySelector('ul'); var li = ul.querySelector('li')