There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
The interface says that I successfully completed the exercise, but the background color did not change. The only way for me to make it change is to comment out the relevant CSS. There are other Codeacademy exercises that have a similar result - CSS wins out over JS. I have tried this on both Safari and Chrome running on MacOS. This is my code:
let bodyColor = document.querySelector('body');
bodyColor.style.backgroundColor = '#201F2E';
Nothing, as such, but we should review the CSS before drawing any conclusions. Examine the selector rule for body in the style sheet. Notice that it is using the background property, and not background-color? There is the problem.
Our JS should be targeting that property, rather than backgroundColor, or we should change the CSS to use, background-color instead of background. Either way, we fix the problem (but also lose the gradient).
Same here. I think it’d make great sense to change the exercise to reflect that.
About background vs. background-color:
The background-color property doesn’t allow for gradients?
I have a question. Was this intentional? Because it is EXTREMELY confusing. This is the text from the question:
Style the background-color of the body in the blog-post document to match the color of the Codecademy text editor, '#201F2E' by using the .style property.
Looking at the CSS style sheet shows that ‘background’ is what should be changed if you actually want to change the color in the editor. But the question specifically states to style the ‘background-color’. But doing that in main.js does nothing to the blogpost. But the test passes? That is crazy confusing.
Which means, either the test passes and nothing changes or you change the color, but the test does not pass.
background and background-color are not the same property. The latter is more specific and will override the former, if one is not mistaken. We can test this by writing both properties in the same rule, one after the other and see which one has the ability to override the other.
I agree, you are correct on the background and background-color are different.
The problem I pointed out was that the question/instruction were to “Style the background-color”. But doing that changes nothing, but the test passes as if something was done correctly. It is insanely confusing.
Here is the question:
Style the background-color of the body in the blog-post document to match the color of the Codecademy text editor, '#201F2E' by using the .style property.
The part that confuses me is, why does the test pass? Meaning, the little green check box says I did something right. But looking at the blog post nothing changes. I have to actually change ‘background’ to get the color to change to what is in the instructions.
Go to the course and follow the steps as outlined. You will see what I am talking about.
I see what you’re saying. If we set the background, nothing happens, but if we set the background-color, the change takes effect and we can see the gradient effect.
Be sure to use the JS camelCase property name. Hyphenated names don’t work in JS.
backgroundColor
We’ll see if we can’t get someone to look in on this lesson. Might be there is nothing they can do to change it, aside from the proviso I just gave you, above.
It’s actually the opposite. The instructions tell us to change the background-color (i.e. to use backgroundColor in our code). When done “successfully,” no visible change happens because the tag is actually pulling its background from the background property, not background-color.
The Codecademy instructions should be instructing us to change background, as that would make the exercise’s success visible when we run it in the test browser.
I understood this because I know much more about HTML/CSS than I do about JS, but if this can be flagged for the future, it would make this exercise much easier to understand intuitively.
document.getElementsByClassName(‘heading’)[0].style.fontFamily = ‘Roboto’;
i change the code to this, it passed, so although the class heading is the only one, i should still treat it as array, i think.
That worked for me but should work without the ‘[0]’ too. And the hint says: “You can use the .querySelector() method to select the first element with the class name 'heading' . Then make sure to attach the .fontFamily property to .style .”
That didnt work for me either with: document.querySelector(‘heading’).style.fontFamily = ‘Roboto’;
As long as every object in front of the property is in order, yeah. But, it is folly to attempt such a degree of granularity. At least make it readable.
) below.
) to up-vote the contribution!