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 Cassandra Cunningham
Cassandra Cunningham
2,810 Points

Styling and Javascript

I wanted to improve the random number guessing game we created in the basic Javascript course by adding css styling and images to the page. The page loads correctly blue background and colored text and I linked the script to a button to begin the game but at the end when the document.write() runs saying if you guessed the number right or wrong all the styling from my css disappears. it's a white page again. How do I fix this?

2 Answers

Alexander Solberg
Alexander Solberg
14,350 Points
Alexander Solberg
Alexander Solberg
14,350 Points

document.write() will clear the document and display whatever data passed to it.

Check out what it does on this site, press ctrl+shift+j, or cmd+shift+j(on mac I think, not really sure), which opens up the console(in chrome) where you can play around with javascript.

Write: document.write('Hello there');

Press enter, and see what happens :) Everything is overwritten. Right-click and select "inspect" in the window and you will see that all of your html and css is gone and replaced.

If you want to play around with small projects, typically number guessing games and such, I recommend checking out codepen.io

Antti Lylander
Antti Lylander
9,686 Points
Antti Lylander
Antti Lylander
9,686 Points

You can print the results using innerHTML property. Just keep doing the courses and you'll soon learn about it.

Like this:

//this function takes a string as an argument. Can contain HTML code.
function print(message) {
   //select an element by id (change according your HTML) and store it in a variable
  const output = document.getElementById('results');
   //set the selected element's HTML
  output.innerHTML = message;
};

If you want assistance in making that work, please share your whole code.