Multiple Console Errors Logged for JavaScript/jQuery Code

Question

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/

@abney317, that is a correct catch! But the console is still logging the same errors....and this is crazy, because I have another project with jQuery/JavaScript, and it gives no such issues! — codebwoy, Jan 03 '18 at 21:02
I see you changed `Document` to `document`. But the message is actually telling you that your server was found, but the resource wasn't found on that server (that is what a 404 error is). Please check your URL link: `http://api.forismatic.com/api/1.0/`... this represents a directory, and not a file. You should have something like `http://api.forismatic.com/api/1.0/afilename.php` — Sablefoste, Jan 04 '18 at 16:54
@Sablefoste, hi, that 404 error is no longer showing in my Google Chrome developer console — codebwoy, Jan 04 '18 at 17:12

score 0 · Answer 1 · answered Jan 03 '18 at 20:57

0

Try to replace

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

with

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

answered Jan 03 '18 at 20:57

T.Liu

492
1
5
16

Did you add onClick events for buttons to make API calls? – T.Liu Jan 03 '18 at 21:02
no I haven't added that as yet, shouldn't the code work overall even before I add the buttons? Or not? – codebwoy Jan 03 '18 at 21:04
Because I didn't see any error from CodePen after this correction, wondering if any other codes missing. – T.Liu Jan 03 '18 at 21:06
you "didn't see any error from CodePen after this correction?" Where? I also just uploaded a screen-shot of all the failures logged to the Google Chrome Developer Console. – codebwoy Jan 03 '18 at 21:11
I mean that there's no error after correcting 'Document' to 'document' in the CodePen console. – T.Liu Jan 03 '18 at 21:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162456/discussion-between-t-liu-and-codebwoy). – T.Liu Jan 03 '18 at 21:32

score 0 · Answer 2 · answered Jan 04 '18 at 05:05

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

Multiple Console Errors Logged for JavaScript/jQuery Code

2 Answers2