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 Treehouse Club - MASH MASH - JavaScript Fill in Answers and Get Answers Functions

Dana Al Taher
Dana Al Taher
2,272 Points
Posted by Dana Al Taher
Dana Al Taher
2,272 Points

Why use InnerText AND InnerHTML together?

I have noticed in the code that in the fill_in_answers function, we created variables for each span element (for house, location, pet. and profession) then we added the one of the answers (choices) to them.

We first added the answer using innerText by setting the inner text to answers['category'] where answers is the object that contains the chosen choice for the category (the categories are mash. profession, pet, and location). I get this part.

// Fill them with the provided answers
  home.innerText = answers['mash'];
  profession.innerText = answers['profession'];
  pet.innerText = answers['pet'];
  location.innerText = answers['location'];

But then we used innerHTML to add the same answer as seen in the following code.

  home.innerHTML = answers.mash; // Change the content of the element in the HTML doc with the id "home" to the "mash" value in answers
  profession.innerHTML = answers.profession; // Change the content of the element in the HTML doc with the id "career" to the "career" value in answers
  pet.innerHTML = answers.pet;
  location.innerHTML = answers.location;

Why did we add the answer using both InnerHTML and innerText instead of using just one of them? (I tried it, and using either one of them would work perfectly).

Also, what is the difference between answers['mash'] and answers.mash ?

1 Answer

Brent Suggs
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points
Brent Suggs
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points

Unlike innerText, innerHTML lets you work with HTML rich text and doesn't automatically encode and decode text. In other words, innerText retrieves and sets the content of the tag as plain text, whereas innerHTML retrieves and sets the same content but in HTML format.

answers['mash'] and answers.mash are just two different ways to reference a key in an array.