Uncaught SyntaxError: <

Question

I have a set of simple scripts that show hidden divs on a Blackboard Learn page. I was working on the scripts earlier and it appears I've broken them. The first error thrown is: "Uncaught SyntaxError: Unexpected token <". After that, the page throws 11 "Uncaught ReferenceError: jQuery is not defined" errors. It seems like I must have messed something up when loading my jQuery library or in declaring jQuery.noConflict(). Below is my code. Does anyone see anything blatantly wrong?

<script type="text/javascript">
    Event.observe(document,"dom:loaded", function() {
            <!-- Load jQuery libraries-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script> jQuery.noConflict(); </script>

    <!-- Get Modals -->



    <!-- Show various info divs on icon click -->
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv1").click(function(){
                jQuery("#academicSupportModal").toggle();


            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv2").click(function(){
                jQuery("#announcementsModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv3").click(function(){
                jQuery("#discussionsModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv4").click(function(){
                jQuery("#emailModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv5").click(function(){
                jQuery("#examsModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv6").click(function(){
                jQuery("#facultyModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv7").click(function(){
                jQuery("#gradebookModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv8").click(function(){
                jQuery("#homeModal").toggle();

            });
        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#fusdiv9").click(function(){
                jQuery("#supportModal").toggle();

            });
        });
    </script>



});

Thanks for pointing that out! I moved my jQuery library call and jQuery.noConflict outside of the first script and reformatted comments as suggested below. Code seems to be working now. Thank you all for your prompt responses! — dfay002, Oct 17 '16 at 20:56

score 0 · Answer 1 · answered Oct 17 '16 at 20:38

0

Javascript comments use the format // to comment out the rest of a line or '/* comment */'.

Here is your problem:

Should be:

// Load jQuery libraries

answered Oct 17 '16 at 20:38

bcr

3,791
18
28

score 0 · Answer 2 · answered Oct 17 '16 at 20:38

This:

        <!-- Load jQuery libraries-->
                                  ^^^

ONly the  has NEVER been valid JS syntax, and has to be commented out via JS comments:

<!-- Load jQuery libraries  //-->
                            ^^

And since JS-unaware browsers are now, by internet standards, older than the dinosaurs, there is literally ZERO point in using HTML-style comments in JS. Just use JS comments:

/* Load jQuery Libraries */

Uncaught SyntaxError: <

2 Answers2