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

Posted by Wei Han Liu
Wei Han Liu
11,231 Points

I do not understand div.innerHTML = message;

Can someone please explain to me the things inside function print(message). Appreciate a lot ;)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Objects</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>Objects</h1> <div id="output">

</div> <script src="js/object.js"></script> </body> </html>

var person = { name : 'Sarah', country : 'US', age : 35, treehouseStudent : true, skills : ['JavaScript', 'HTML', 'CSS'] };

function print(message) { var div = document.getElementById('output'); div.innerHTML = message; }

var message = "<p>Hello. My name is " + person.name + '</p>'; print(message);

2 Answers

Joseph Wasden
Joseph Wasden
20,407 Points

First, lets take the code you shared and put it into markdown, so it is more legible. in the future, try sharing code samples directly from a code challenge, and/or research how to represent your example code in markdown. This will help you receive better answers in the future.

<!DOCTYPE html> 
   <html lang="en"> 
   <head> 
     <meta charset="UTF-8"> 
     <title>Objects</title> 
     <link rel="stylesheet" href="css/styles.css"> 
   </head> 
   <body> 
     <h1>Objects</h1> 
     <div id="output">
     </div> 
     <script src="js/object.js"></script> 
   </body> 
</html>

function print(message) { 
   var div = document.getElementById('output'); 
   div.innerHTML = message; 
}

var message = "<p>Hello. My name is " + person.name + '</p>'; 
print(message);

Ok, lets break this down. The function print() accepts one parameter, message. 

function print(message) { 
  //code removed for clarity
}

next, the function declares a variable named div, and sets that div variable to the value that is returned by document.getElementById('output'). in this case, that will return the DOM element that has an ID of output, meaning that the variable named div will be set to the HTML element with an ID of output. I've commented the code below to show you where this is located.

<body> 
     <h1>Objects</h1> 
     <div id="output"></div> <!-- <-- here is the DOM element with an ID of output --> 
     <script src="js/object.js"></script> 
   </body> 

function print(message) { 
   var div = document.getElementById('output'); 
}

notice how the div with an id of output has nothing inside of it? the div tags contain nothing at present. in other words, the innerHTML of those div tags is empty. The next step of our function will change that. it take the HTML stored in our div variable, and sets the inner HTML to be the value of the message variable that was passed into the function when it was run. 

function print(message) { 
   var div = document.getElementById('output'); 
   div.innerHTML = message; 
}

Lastly, after all this has been accomplished, the code you shared will set a variable named message to the concatenated string declared in the code.

The last bit is a function call that runs the function you just created.

see the commented code below.

function print(message) { 
   var div = document.getElementById('output'); 
   div.innerHTML = message; 
}
//this is where a variable namend messages is declared.
var message = "<p>Hello. My name is " + person.name + '</p>'; 

//this will call the method described above.
print(message);
Wei Han Liu
Wei Han Liu
11,231 Points

Thanks for explaining in such detail. Love it !

Jorge Lopez
.a{fill-rule:evenodd;}techdegree seal-36
Jorge Lopez
Python Development Techdegree Graduate 35,350 Points

Just letting you know this answer is still helping clarify even after 2 years.

Learned a ton reading this right now.

Tim Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

*** See comments at end of code.

var person = { 
    name : 'Sarah', 
    country : 'US', 
    age : 35, 
    treehouseStudent : true, 
    skills : ['JavaScript', 'HTML', 'CSS'] 
};

function print(message) { 
    var div = document.getElementById('output'); // variable that holds an element with id="output"
    div.innerHTML = message; // set element's inner HTML by creating a child element - a paragraph in this example
}

var message = "<p>Hello. My name is " + person.name + '</p>'; // variable stores a string that creates an element in the DOM when set with div.innerHTML
print(message); // function call that passes the HTML syntax as an argument
Wei Han Liu
Wei Han Liu
11,231 Points

Thank you, now I understand it. Appreciate it!