jquery code working in JSfiddle but not locally

Question

This is in continuation to my first question. I found out the code does work properly in JSfiddle when I copied and pasted it there.

I spent hours, and I still can't figure out why the exact same code doesn't work when I open it in my browser from the text editor (html file on my computer).

Here is the JSfiddle link: http://jsfiddle.net/MhmC7/

  var C = $("#a20 option");
  C.on('mouseenter', function () {
  var V = $(this).val();

$("#" + V).addClass("hover");
})

C.on('mouseleave', function () {
var V = $(this).val();

$("#" + V).removeClass("hover");
})

I did link the html file to jquery library like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

I have no idea what the problem is. thanks a lot.

i was asked to add all my script tags in order so here they are:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  </script>

   <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
   <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>


   <!-- Include the DropDownCheckList supoprt -->
   <script type="text/javascript" src="ui.dropdownchecklist.js"></script>


    <!-- Apply dropdown check list to the selected items  -->
    <script type="text/javascript">
    $(document).ready(function() {
        $("#a1,#a2,#a3,#a4,#a6,#a5,#a7,#a8,#a9,#a20").dropdownchecklist( { icon: {placement: 'right', toOpen: 'ui-icon-arrowthick-1-s'
                                        , toClose: 'ui-icon-arrowthick-1-n' }
                                        , maxDropHeight: 200, width: 220
                                        , groupItemChecksWholeGroup: true
                                        , textFormatFunction: function(options) {
                                            var selectedOptions = options.filter(":selected");
                                            var countOfSelected = selectedOptions.size();
                                            var values = "";
                                            for (i=0; i< selectedOptions.size(); i++) {
                                                if (selectedOptions[i].text != "")
                                                                           values += selectedOptions[i].text; 
                                                                           values += "; ";
                                            }
                                            switch(countOfSelected) {
                                                case 0: return "<span style='color:red;font-weight:bold'>Everybody</span>";
                                                case 1: return selectedOptions.text();
                                                case options.size(): return "<span style='color:red;font-weight:bold'>Everybody</span>";
                                                default: return values;
                                            }
                                        }
                                        , onItemClick: function(checkbox, selector) {
                                            //alert("value " + checkbox.val() + ", is checked: " + checkbox.prop("checked"));
                                        }
                                  });
    });






     </script>

    then, the last one is the script with the function in question, appearing right  before the </body> end tage, like so:

    <script type="text/javascript">

    $(document).ready(function() {
    var C = jQuery("#a20 option");
    C.on('mouseenter', function(){

    var V = $(this).val();
    $("#"+V).addClass("hover");
    });

   C.on('mouseleave', function(){
  var V = $(this).val();
  $("#"+V).removeClass("hover");
   }); 

 });
</script>

Answer 1

Here are the things you should check:

1. Check the browser error console or debugger console to see what errors are reported. If there are errors, they will probably indicate what is going on.

2. Your jsFiddle has set your script to run onDomready (setting on the left side of the jsFiddle). If the code in your page is in the <head> section of your page or in the <body> section before your HTML, then the code would be running too early before the DOM elements are present and would not work.

3. Your code in your page needs to be encapsulated in <script> tags, but that is not necessary in the jsFiddle because code in the script section is automatically interpreted as script in a jsFiddle.

4. Double check that you are include jQuery appropriately in your page and that it's being included before you try to use it.

To get to the debug console...

In Chrome: right click on an element in the page and choose Inspect Element. In the window that opens click on the word Console in the menu/tab bar. Read any errors or warnings in the debug console window.

In Firefox: Install the Firebug extension or open the Web Console via the menus. After installing the Firebug extension, right click on the page and click on Inspect Element with Firebug. Click on the Console tab. You may then need to hit reload for the browser page (with the Firebug window now open) to see the console errors for that page.

In recent versions of IE: With your page open, hit F12. When a window opens, click on the console tab. In IE11, this is a graphic along the left side of the window that looks like a rectangle with a > prompt in it. In other versions of IE, the UI for getting to the console is different.

Here's an article that covers how to get to the error console in these and other browsers. There's a wealth of other information via a Google search for "browser error console" if you need more help.