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!
In JavaScript Interactive Websites attribute async, I am not seeing the effect of the async attribute, I added to the turnBlue.js . the codeacademy logo is still pink. can someone explain why
I guess according to the explain, the Codeacademy logo is supposed to be yellow but it starts with pink. @oreva20 I saw the logo in blue once after hit the run many times
In this exercise, THE SCRIPT ELEMENT: Async attribute, I see that the file style.css comes first than the file turnBlue.js inside the HTML document. If, as it was said before, the HTML parser, analyzes the document sequentially, why does .css prevail over .js?
A CSS document will probably be lighter than a JS script so rather have your site looking as it should before rolling out animations and whatever else maybe in your js file.
So js will take longer to load which would delay your whole site, if the HTML & CSS is loaded first then there is no unnecessary delays.
He may be referring to the fact that, as long as we don’t add async, the logo never turns blue. At least that’s how it behaves for me. I tried running the code before adding async and the logog remained pink, as if the .js script was never executed - or it was, but the CSS styling somehow got the upper hand? Also when I remove the async attribute and run the code again, the logo turns back from blue to pink.
I ran the code from this exercise in a codepen and the text does turn blue without a defer or async. Was there ever a response on why in the exercise browser, it stays pink without async declared in the script tag?
After a year on the forums no one from Code Academy has answered a simple question:
why does the logo not turn blue without the async attribute?
The lesson says async merely downloads the JS asynchronously and then executes it. This is obviously not the whole truth because that wouldn’t make the text stay pink.
So here’s my understanding of the <script> tag so far
When an HTML parser comes across a <script> tag, it will load the JavaScript. Once it finished loading the script, it will execute it while parsing the rest of the HTML
When an HTML parser comes across a <script> tag with a defer attribute, it will load it, but will not execute it until all of the HTML has been parsed. This is helpful if you are interacting with a specific element - you want to make sure this element has been parsed before interacting with it
When an HTML parser comes across a <script> tag with an async attribute, it will load it and execute it while also parsing the rest of the HTML. This is helpful if you aren’t interacting with the DOM and you just want to load and execute the script as fast as possible
Please correct me if I’m wrong
I still have one question though. I don’t understand this lesson’s task. Even though it worked fine, why did the async attribute change everything? I though that even if we didn’t have the async attribute, because the script came after the <style> element, it would take precedence over the CSS
Yes, this puzzles me as well. According to the logic presented in the previous exercises, the text should turn blue anyway once the JS script loads, but it doesn’t.
Why does the CSS take precedence over the JS file if the latter is presented without “async”?
I’m also here to bump this question! Logic of the lesson so far would have the text turn pink regardless of attribute once the JS was loaded. Please Help!
If I understand correctly, here’s what happens without async:
When the HTML parsing reaches the <script> element, turnBlue.js is fetched and then its execution starts.
document.getElementById('logo')returns null since the <p id="logo"> element is not parsed yet.
elem.style.color = 'cyan' raises TypeError (and not executed correctly).
After that, the <p id="logo"> element is parsed.
In this case turnBlue.js just throws an error and isn’t executed correctly. So the “Codecademy” becomes pink as stated in style.css.
If we add async to the <script> tag, the HTML parsing will continue in parallel with fetching of turnBlue.js. And in our case, it seems that the <p id="logo"> element is parsed before executing turnBlue.js:
When the HTML parsing reaches the <script> element, turnBlue.js starts being fetched and HTML parsing will continue in parallel.
The <p id="logo"> element is parsed.
After that, turnBlue.js starts executing.
This time document.getElementById('logo') returns the <p id="logo"> element.
So elem.style.color = 'cyan' is executed correctly.
) below.
) to up-vote the contribution!
