During a learning program, I created a basic random quote generator. The code worked flawlessly on codepen.io. Using a simple JavaScript (jQuery) function, I displayed random quotes along with their authors, which were stored in an array.
I ensured that the function executed when the page loaded and when a button was clicked. You can view the fully functional project on codepen.io.
Although the page successfully displayed a random quote upon loading, clicking the button on my online version at empathies.eu resulted in no action.
The code snippet from my JavaScript file is below:
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);
While the document ready event executed as expected, the click event was being ignored. I am seeking help to unravel this mystery. Can anyone assist me?