Hey there, i’ve started an small JavaScript course before getting into the freecodecamp one (would like to get some quick principles first).
I’m trying to store the .innerHtml on a variable to restore it later; it’s working fine while using codepen; but when i take it to atom it won’t work.
Main difference is i’m using separated files (.html, .css, .js), i can’t understand what’s happening.
This is .innerHtml store code:
var original = document.getElementById(‘image’).innerHTML;
It’s the first line in my .js file and console.log() will return Uncaught TypeError: document.getElementById(…) is null` ; somehow it will save the .innerHtml while working on codepen).
This is the function i’ll call to restore content and style of the element:
function unDo(){
document.getElementById(‘image’).innerHTML = original;
document.getElementById(‘image’).style = backgroundOriginal;
}
Btw, the style thing is working.
Any help is appreciated; i’ve reached my limits for this one
reading online i’ve found that maybe the element ‘image’ isn’t loaded yet when the script is excecuted, but i can’t move that script to the html and place it under the img element as they recommend as the excercise says it must be in separated files
What needs to be in separate files? You can place the script element right before the closing body tag and reference the JavaScript file (I am assuming script.js or something like that).
If you put your JavaScript in Codepen’s JS Module, then a script tag gets automatically appended with a reference to the script.js file. In fact, if you have a working Codepen project, you can simply export the whole project as an option and it will put all the files (index.html, styles.css, and script.js) in a zip file and create the necessary links to the files for you.
Sorry i´m struggling with my english and js here, both new lang to me with separate files i mean mi scripts are in .js file while the DOM is actually in a .html; and i cannot move the script to the .html to place it before the body; it has to stay in scripts.js
i’ll try the exporting thing later when i’m back on my pc; also i’ll post the whole code here.
When i go for index.html, gallery.css and gallery .js, and run it on firefox function unDo() will restore the original div background but the .innerHTML script returns undefined.
When running the code in your local environment (Firefox), try moving your Javascript to just before you close your body tag.
As it currently stands, this code:
<script src = "js/gallery.js"></script>
runs before the body is even being created, so the elements you’re targeting in your JS don’t even exist yet.
By moving the JS, you’ll ensure the element exist before trying to grab them.
There are other workarounds for this - you can add a line to wait for the body to load before running your javascript, but moving the JS should suffice for now.
It’s not a work around, before your closing body tag is typically where your script tag should be, not in the head tag.
On codepen you don’t need a script tag in your HTML so even though it’s in the wrong place there, behind the scenes codepen puts your script in the right place.
Hi Eoja - not sure I agree completely here. There are good reasons for JS to live in both places, hard to say if one is better than the other.
For any JS that needs to run immediately on elements that will live in the body, you’re right, the JS should render later. This could be from being placed just before closing body, or from placing the JS inside of a load event on the body.
If using a load event, placing in <head> works fine. There are also good reasons for getting JS started (especially asynchronous JS) in the head, if it doesn’t necessarily rely on elements in the body (analytics, api calls, etc).
Maybe I should not have said “typically”. There are use cases for both. In this case moving the script fixes the problem, that does not make it a “work around”.
I mean not rewriting anything in the html file was part of the exercise, that’s why I’ve said moving it after the body won’t be the best way, maybe work around is not the right term anyway.
with separate files i mean mi scripts are in .js file while the DOM is actually in a .html; and i cannot move the script to the .html to place it before the body; it has to stay in scripts.js 
