Scripts work inside HTML but not inside Scripts.js

Question

Recently I started developing my own website and improving my own knowledge of coding. With this I already started to run into many problems that are taking quite a while to fix, but so far everything as been resolved except this one.

Yesterday I attempted to add "modal images" from w3schools to the picture gallery I created, everything seem to be working except the scripts.

Then I decided to isolate the script in a completly seperate file to make sure the code actually worked and it wasn't me that was doing something wrong. At the start it did work when the entire code was all jammed up in the HTML, after I seperate the CSS from HTML which caused no issues, but as soon as I took the scripts out of HTML into Scripts.JS the modal stopped working completly.

As my knowledge of javascript is pretty close to none I am hoping somebody can shine some light in my problem since I'm pretty out of ideas.

Here is the script.

PS: currently this is the only script that does not work and I have other scripts that do indeed work in the same file so the file is getting loaded its just this particular script isn't working properly.

// JavaScript Document

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.href ="";
  captionText.innerHTML = this.alt;
};

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
};

Maybe a duplicate of https://stackoverflow.com/questions/4498482/javascript-cant-find-element-by-id. Your HTML code would be needed to tell for sure. — Peter Lehnhardt, Oct 14 '20 at 14:00
[stopped working](http://idownvotedbecau.se/itsnotworking/) isn't a useful description of the problem. Learn to use the debugging tools in the browser. — Quentin, Oct 14 '20 at 14:01
while on browser, console displays "Uncaught TypeError: Cannot set property 'onclick' of null at script.js:10" — Guido Almeida, Oct 14 '20 at 14:03
JavaScript code does not get reference to DOM element. Either move script tag at bottom of body tag or use window.onload — Fraddy, Oct 14 '20 at 14:07

score -1 · Answer 1 · edited Oct 17 '20 at 15:52

Your code might not be working because is running before the DOM is ready. Try something like the following:

document.addEventListener("DOMContentLoaded", ready);
if (document.readyState === "interactive" || document.readyState === "complete" ) ready();

function ready(){

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.href ="";
  captionText.innerHTML = this.alt;
};

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
};

}

The addition of the DOMContentLoaded handler is not necessary in modern JavaScript. The OP simply needs to add `defer` to the ` — Randy Casburn, Oct 14 '20 at 14:05
I have tried adding the defer tag to in both the test file and the live website and im glad to say it has fixed the issue, many thanks to all! — Guido Almeida, Oct 14 '20 at 14:09

Scripts work inside HTML but not inside Scripts.js

1 Answers1