Javascript built in codepen doesn't work on my own website

JavaScript
1

Hi all,

For the last few weeks I’ve been using FreeCodeCamp to get back into coding & web development.
For the projects I’ve been using Codepen as an easy way to quickly see what I was building. But as I want to start applying for junior developer jobs I thought I’d build a website of my own, on my own domain, so I could also get a first experience in hosting a real website (+ give GIT a shot).

The first page I uploaded to the web server was the Random Quote Generator built in the Front End Libraries Certification.

On codepen.io my code worked perfectly. I built a single (& simple) function in javascript that rendered a random quote (stored in an array) along with the author.

I then made sure that my function would run as the page was loaded, and also when the button was clicked.

This is the codepen.io page of my project, fully functional
https://codepen.io/empathies/pen/NWRvXKK

This is the link to the page I put online (still need to add the extra CSS to resize the box & I deleted the twitter button for now)
http://empathies.eu/FreeCodeCamp/random-quote-generator.html

When the page is loaded a random quote is shown, proving that my html page can access my Javascript file (in a different folder), but when I click the button on my page nothing happens.

Here is the content of my .js file (declaration of my “quotes” array is just above in the file)

const generateQuote = function() {
  let random = Math.floor(Math.random() * quotes.length);
  $("#text").fadeOut(function () {$('#text').text(quotes[random][0])}).fadeIn();
  $("#author").fadeOut(function () {$('#author').text(quotes[random][1])}).fadeIn();
}



$(document).ready(generateQuote);
$("#new-quote").click(generateQuote);

The document ready line is excecuted, but the click-event is completely ignored.

Can anybody help me solve this mystery?

2

I also posted my question on stackOverflow and already found my answer.
I linked to my .js file at the top of the page, meaning the script was loaded before my button element was created.
Now I moved my link to the bottom of my page enabling the script to find my button when loaded. works perfectly now.