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
Kimberly Dolcin
4,369 Pointscan someone explain the new function print(message) in this video, i still do not understand it>?
f
6 Answers
Steven Parker
229,732 PointsThere are two versions of "print" in the video. The first one is just a shorthand for "document.write" to add HTML content to the page.
The second one updates the inner content of a particular HTML element (a div that has the id "output") that is already present on the page. It allows more control over where and how the message is displayed on the page.
Jennifer Nordell
Treehouse TeacherHi there, Kimberly Dolcin! I see that quite a few have put in their two cents here, but I thought I might give it a shot. And what might be tripping you up right now, could very well be the same thing that tripped me up when I first started learning about functions. So, I'm going to make an educated guess here and it might be that you aren't understanding where the variable message comes from. Although, I could be mistaken.
When you define a function, you can choose to give it a parameter. Now "parameter" is a fancy way of saying a new variable that is visible only to that function. Later when you call/invoke/execute the function you can put something in the parentheses at the call site and when the function executes, the parameter will be assigned the value of what was in the parentheses there.
A function definition:
function sayHi(student) {
console.log("Hi there, " + student);
}
A function call:
sayHi("Kimberly");
When I "call" the sayHi function, I pass it the string "Kimberly". At this point the parameter (local variable) student is assigned the value of "Kimberly". When it executes, it will concatenate the string "Hi there, " with the value of student which is now "Kimberly" and log it to the console. I could also call it with sayHi("Steven"); and it would then log out a greeting to Steven. Each time we call the function we pass in what we want the variable student to have a value of.
The same is happening here. You have these lines here in the video:
html = "You got " + correctAnswers + " question(s) right.";
print(html)
And the print function starts this way:
function print(message) {
document.write(message);
}
At this point, message is now holding the value of "You got " + correctAnswers + " question(s) right.";. Which is valid, but also has its drawbacks because we're using document.write(). When you use document.write the entirety of everything in the <body> tag is completely replaced with whatever you gave to document.write which isn't really what we're after.
So we replace the document.write() with this:
function print(message) {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = message;
}
In your index.html you will find these lines:
<div id="output">
</div>
This is a <div> element with the id of "output". And right now, it's completely empty. So we choose that div by getElementById("output"); and assign it to the variable outputDiv. Then we change the innerHTML property to be the value of message, which we've already said is the value of html that you passed to the print function.
Something that is not pointed out (yet) is that the innerHTML property can also contain HTML as a string. For instance, we could change that html variable to hold something like:
html = "<p>You got " + correctAnswers + " question(s) right.</p>";
And this would change (very really) the HTML inside that <div> tag. So in your DOM, you would now have something like:
<div id="output">
<p>You got 5 questions right.</p>
</div>
This also means that if you had any CSS linked to that page that say, turned paragraphs to have the background-color of "tomato", it would also apply to that paragraph you just inserted (because we wrapped the strings in <p></p> tags..
p {
background-color: tomato;
}
If anything is unclear, please let me know. I hope this helps!
Jordan Adedeji
6,977 PointsThis was soo helpful. Thank you! :)
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsAs Steven wrote, with this function you manipulate the HTML code trough Javascript. In other words, you will replace the HTML code with the code you wrote in JS. Check out the JavaScript and the DOM classes too ?
Kimberly Dolcin
4,369 Pointsok i still dont understand but thanks for trying
szymon mosiolek
3,480 PointsSo second function is
function print(message) {
// [1]
var outputDiv = document.getElementById('output');
// [2]
outputDiv.innerHTML = message; //[2]
}
So:
[1] Find in the HTML div with id 'output' and store it in variable (in practice you store HTML element <div id="output"></div>)
[2] Now with .innerHTML you update what is inside outputDive (<div id="output"></div>) so in practice - put inside of div everything what is stored inside variable 'message' and get <div id="output">Our message</div>
mohammed osman salah
9,587 Pointsi dont get it yet function print(message), i did not see massage is defined i dont know what is holding to viedo code function print(message) { document.write(message); } some explain how this works if massage is defined in the code in the video (Useful Array Methods)
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 PointsHi Kimberly,
Imagine that you don't use this print function at all. Just write this code in 10 different places in your program :
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
document.write('I love Treehouse');
Then you realized that you may like to write:
document.write('I really really love Treehouse');
or you just simply don't want to use document.write. you would like to use the innerHTML version. In this case, you have to REWRITE your 10 codes in the whole program. But if you have a function (which you just call later in your code) you have to modify JUST THE FUNCTION.
Hope it helps.
Kimberly Dolcin
4,369 Pointsthank you for the detailed explanation i understand why i just want to know how
Kimberly Dolcin
4,369 PointsKimberly Dolcin
4,369 Pointsi dont understand the second one
Steven Parker
229,732 PointsSteven Parker
229,732 PointsThe HTML code starts out with a "div" element that has no content other than a blank line:
The new "print" function uses the "getElementById" method to find this element and put a reference to it into the variable "outputDiv". Then, it uses the "innerHTML" property of the element to change it to the message.
So if the message is "You got 1 question(s) right.", then the result is the same as if this was in the HTML code to begin with:
Kimberly Dolcin
4,369 PointsKimberly Dolcin
4,369 Pointsthx for trying but i still dont get it.... i understood your explanation up to when you said " and put a reference to it into the variable "outputDiv". Then, it uses the "innerHTML" property of the element to change it to the message.">i dont understand this part of your answer
Steven Parker
229,732 PointsSteven Parker
229,732 PointsI'll try breaking it down further. So starting with this line:
var outputDiv = document.getElementById('output');This creates a new variable named "outputDiv". The selector function looks through the document to find the element that has the "id" value of "output". When it finds it, it puts that element into the variable. We can now use the name "outputDiv" to reference that element on the page. Then moving on:
outputDiv.innerHTML = message;This line uses that variable to access the "innerHTML" property. Anything you put into that property changes the contents of the element on the page. So here, whatever was stored in the "message" parameter is now put into that
divelement on the page and will be seen.Kimberly Dolcin
4,369 PointsKimberly Dolcin
4,369 PointsOMG STEVE PARKER.... i would give you a hug if is could...I finally understand it with your last explanation! THANK YOU SO MUCH!
Michael Hulet
47,912 PointsMichael Hulet
47,912 PointsHey Kimberly! I took care of it for you here, but if an answer solves your problem in the future, please remember to mark it as the best answer! This does a few things, including signaling to other students that your question has a good answer and which one it is so others can find it and learn from it too, as well as giving the person who wrote it a little points boost as a reward for doing a good job. Thanks for being a helpful member of the community!