Multiple Console Errors Logged for JavaScript/jQuery Code

1.3k views Asked by At

Hi I am having a series of issues with my JavaScript/jQuery code! And even though I browsed through a list of similar questions, I can't find any answers that fits my problem.

These are the issues logged to the Google Chrome developer console:

  • Failed to load resource: the server responded with a status of 404 ()
  • Uncaught ReferenceError: $ is not defined
  • Failed to load resource: the server responded with a status of 404 ()
  • jQuery.Deferred exception: Failed to construct 'Document': Please use the 'new' operator, this DOM object constructor cannot be called as a function. TypeError: Failed to construct 'Document': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999) at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined
  • Uncaught TypeError: Failed to construct 'Document': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at j (jquery.min.js:2) at k (jquery.min.js:2)

Thanks so much for your help!

Here's my JavaScript Code:

$(Document).ready(function() {

  var quote;

  function getNewQuote() {
    $.ajax({
      url: 'http://api.forismatic.com/api/1.0/',
      jsonp: 'jsonp',
      dataType: 'jsonp',
      data: {
        method: 'getQuote',
        lang: 'en',
        format: 'jsonp'
      },
      success: function(response) {
        quote = response.quoteText;
        $('#quote').text(response.quoteText);
        if (response.quoteAuthor) {
          $('#author').text('said by ' + response.quoteAuthor);
        } else {
          $('#author').text('- unkown');
        }
      }
    });
  }
});

view CodePen here: https://codepen.io/IDCoder/full/KZqNdr/

Screen-shot of the Google Chrome Developer Console Log

2

There are 2 answers

6
T.Liu On

Try to replace

$(Document).ready(function() {...});

with

$(document).ready(function() {...});
0
codebwoy On

I'm sorry! I should have also included my html code in my question. I found that in my html sheet's <head></head> tags, I had this: <link rel="stylesheet" href="Random Quote Machine.css">. This was a carry over from my text editor, wherein I needed that link for file communicae. I also tested this solution by inserting such a line of code into the html sheet of another of my CodePen projects that includes JavaScript and jQuery, and then checked the Google Chrome developer and it gave the same error: Failed to load resource: the server responded with a status of 404 (). I am so happy!:D