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 JavaScript Basics (Retired) Making Decisions with Conditional Statements Boolean Values

Posted by Tajul Sharby
Tajul Sharby
3,463 Points

Codepen not behaving the same way as previewed in chrome

I've tested the code in code pen apparently the <p> element was out of the box, but the whole thing works in browser. What really happen?

Here's a link for my code: http://codepen.io/shukritobi/pen/MweJpP

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

If you mean that the message is being added outside of the .container it is because you are using docuemnt.write(). This will append the message to the end of the document.

To place the message within .container you could do the following:

/* Change (it's the last 'if' statement in your code) */
/* Note: the 'p' tags aren't displaying in the strings */
if ( correctGuess ) {
  document.write("<p>You guessed the number!</p>");
} else {
  document.write('<p>Sorry. The number was ' + randomNumber + '.</p>');
}
/* To */
if ( correctGuess ) {
  document.querySelector('.container').innerHTML += '<p>You guessed the number!</p>';
} else {
  document.querySelector('.container').innerHTML += '<p>Sorry. The number was ' + randomNumber + '.</p>';
}
Tajul Sharby
Tajul Sharby
3,463 Points
Tajul Sharby
Tajul Sharby
3,463 Points

Thanks for the quick response Sean!

Sure I'll try out the code you've suggested above.

Can you explain why the javascript document.querySelector('.container').innerHTML += 'You guessed the number!'; is the right/better syntax whereby document.write("You guessed the number!"); when previewed using the TreeHouse Preview is shows me that is the right syntax?

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

I went and checked the files for the project for this lesson. The reason document.write() works in the video and as well with the project files is because script.js is included within the .container tag block.

As I mentioned earlier, document.write() appends new content to the end of the document. Well, to be more precise it adds the content within the context it was placed in. In the case of the lesson, the context is .container, whereas in your Codepen the context is the document.

This is because that even though you copied the HTML from the project to Codepen, the actual JavaScript that Codepen renders is the code on the JavaScript panel. As far as Codepen knows there is no script.js because the file doesn't exist in your Codepen. The way Codepen works is that code inside the JavaScript panel is run after the HTML and CSS panels have been rendered.

I hope that helps understand the issue. :)

Tajul Sharby
Tajul Sharby
3,463 Points
Tajul Sharby
Tajul Sharby
3,463 Points

ah, now I remember that you have to link in with the javascript file within the project file. I totally forgot about that!

Thanks for the reply!