CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
user3500457
user3500457

Reputation: 1

jQuery Code not working On Chrome

jQuery code

$(Document).ready(function() {
    var $download = $('#navbar li:nth-child(1)');
    var $about_us = $('#navbar li:nth-child(2)');

    $download.mouseenter(function() {
        $download.fadeTo('fast', 0.5);
    });

    $about_us.mouseenter(function() {
        $about_us.fadeTo('fast', 0.5);
    });

    $('#navbar li').mouseleave(function() {
        $('#navbar li').fadeTo('fast',1);
    });
});

With this code I am trying to make parts of a list darker when you hover. it works in Firefox but not on chrome, what am I doing wrong?

Upvotes: 0

Views: 15513

Answers (3)

Bravo Yeung
Bravo Yeung

Reputation: 9888

Firstly, $(Document) should be changed to low class $(document). Then more facts are below.

For Chrome, do not expect $ is always jQuery.

You can put $ into console to check if it returns default ƒ $(selector, [startNode]) { [Command Line API] }, if yes means $ is not defined for jQuery.

Luckily that we have below ways to try:

  1. Solve the conflict of using $, let it be jQuery without any ambiguity

Firstly, you can put this code snippet

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.3.1.min.js";  /* Include any online jquery library you need */
document.getElementsByTagName('head')[0].appendChild(jq);

into the Console, then put $.noConflict into console, if it not returns undefined, but returns ƒ (t){return e.$===w&&(e.$=Kt),t&&e.jQuery===w&&(e.jQuery=Jt),w}, it means $ is not defined for JQuery now.

Next you can continue to input your regional code, then you will find it works well now.

Refer: https://blog.wplauncher.com/run-jquery-in-chrome-console/


  1. Using .js file instead in Chrome, then debug the JavaScript file.

Refer: Chrome DevTools Snippets

Upvotes: 1

nonopolarity
nonopolarity

Reputation: 151264

I can reproduce the OP's bug and fix it just by changing Document to document:

http://jsfiddle.net/rn5v7/4/ will work on Firefox but not Chrome.

http://jsfiddle.net/rn5v7/5/ will work on both Firefox and Chrome.

The standard way to use DOM ready handler is, as on jQuery's doc:

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

or the shorthand:

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

Note that as seen on Chrome, Document is a constructor function. It is the base class of HTMLDocument, which is the class for the object document.

document.__proto__ === HTMLDocument.prototype  // => true
HTMLDocument.prototype.__proto__ === Document.prototype  // => true

Upvotes: 2

Ian Hunter
Ian Hunter

Reputation: 9784

JavaScript is case-sensitive, so you'll need to use document instead of Document; they are two separate things in Chrome.

Document appears to be a constructor for something in Chrome, but I'm not sure about its usage.

Upvotes: 2

Related Questions