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
Paul Suszynski
756 PointsI have copied the exact code for the Refractor Challenge but I get an error "Cannot set property 'innerHTML' of null.
let html = '';
let red;
let green;
let blue;
let randomRGB;
for ( let i = 1; i < 10; i++) {
red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">${i}</div>`;
}
document.querySelector('main').innerHTML = html;
Mod edit: added markdown formatting for code. Check out the markdown cheatsheet linked below the comment box for examples on how to format your code for readability in the forums.
4 Answers
Cameron Childres
11,820 PointsHi Paul,
I've just tested your code and it works out perfectly for me. Do you have a <main> element in your HTML for your code to select? If not, that would cause this error.
Here is a snapshot of my workspace with your code. You can click "Fork Snapshot" in the top right to see a version that you can edit and preview.
Side note: the markdown used in the forum can cause your code to look wonky since backticks are used to signify inline code segments. Below the comment box there's a link for a "markdown cheatsheet" which will help you display your code correctly here. The most useful one is the code block which I've gone ahead and added to your original post.
Bramyn Payne
19,589 PointsHey Paul,
I believe that your problem is that you are trying to use template literals, but you are not wrapping the string with a backtick (`).
Try adding those in the randomRGB and html += lines!
Paul Suszynski
756 PointsI put in the backtics but still get the same error.
let html = ''; let red; let green; let blue; let randomRGB;
for ( let i = 1; i < 10; i++) {
red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = rgb( ${red}, ${green}, ${blue} );
html += <div style="background-color: ${randomRGB}">${i}</div>;
}
document.querySelector('main').innerHTML = html;
Paul Suszynski
756 PointsUncaught TypeError: Cannot set property 'innerHTML' of null
Paul Suszynski
756 Pointsfor some reason the backtics won't copy and paste into these comments. But they are in my code
Paul Suszynski
756 PointsPaul Suszynski
756 PointsThanks. I think I figured it out. I thought I had to have in my html and element with the id of "main" (<h1 id="main"></h1>) I didn't realize it was just a tag like: <main></main>. Once I did the latter it worked. Thanks. Appreciate the markdown cheatsheet.