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) Storing and Tracking Information with Variables The Variable Challenge Solution

Posted by Kaden Claiborne
Kaden Claiborne
2,648 Points

Can you assign classes to your elements within your .js file?

I was working on this challenge and everything was working just fine, but I decided I would try to get fancy and style the final sentence that I was displaying on the page by adding a class to the h1 tag which I then targeted from the CSS page. When I reloaded the page, it seemed to completely break the program as it would no longer even show me my initial prompts that start the code. Is it not possible to use classes within elements in a .js file?

Thanks for your help! I am very new to JS.

var adjective = prompt("Provide an adjective:"); var verb = prompt("Provide a verb:"); var adverb = prompt("Provide an adverb:"); var noun = prompt("Provide a noun:"); alert("All words provided! Ready to see your sentence?");

var sentence = "<h1 class="finalSentence">The " + adjective + " cat " + verb + " so " + adverb + " that he ran into a " + noun + "!</h1>"; document.write(sentence);

(Also could someone let me know how to include the screen captured images of code that I have seen in previous questions?)

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Kaden Claiborne,

You have a simple mistake which is you're nesting double quotes within a string that is encapsulated already by double quotes. There are two ways to get around this but it's up to you personally to choose one that works best for you.

First solution, escape the quotes

var sentence = "<h1 class=\"finalSentence\">The " + adjective + " cat " + verb + " so " + adverb + " that he ran into a " + noun + "!</h1>";

Note how the class attribute quotes now have a preceding backslash which is how we escape the same quotes type within a string.

Second solution, use single quotes or vise versa

var sentence = "<h1 class='finalSentence'>The " + adjective + " cat " + verb + " so " + adverb + " that he ran into a " + noun + "!</h1>";

This solution is cleaner and easier for the majority of developers to understand.

Again, it's up to you which solution you go with.

Happy coding!

Kaden Claiborne
Kaden Claiborne
2,648 Points

Thanks! I don't know why I completely forgot about that rule when considering the class. That's so clear now!