"Uncaught SyntaxError: Unexpected identifier" error in jquery

30,265

You start an in-line function: $(document).on('mousemove', function(e) { and never finish the statement after it. Before the line with the error, you need }); instead of just }.

Share:
30,265
PitaJ
Author by

PitaJ

I'm a web developer with a focus on Node.js backend and frontend web technologies.

Updated on June 02, 2020

Comments

  • PitaJ
    PitaJ almost 4 years

    I'm making a new jQuery plugin for drawing lines on a page. The problem is that I can't figure out what's going on here, when I run the script, in Chrome it says:

    "Uncaught SyntaxError: Unexpected identifier"
    

    on the 8th to last line (the one that reads: $.line();).

    The whole code:

    (function( $ ) {
    
        $.fn.line = function(coordinates) {
    
            var bothpoints;
    
            $.fn.line.draw = function() {
    
                var lineColor = $('#lineRegion').attr('lineColor');
    
                if (!lineColor) {
                    var colors = ['black', 'blue', 'green', 'red', 'yellow', 'purple', 'magenta', 'cyan'];
    
                    $('img.line').each(function () {
                        colors.splice(colors.indexOf($(this).css('color')), 1);
                    });
    
                    var lineColor = colors[0];
    
                }
    
                var data = $.line.data(),
                    width = Math.abs(data[0] - data[2]),
                    height = Math.abs(data[1] - data[3]);
                if (data[0] >> data[2]) {
                    var lineleft = data[2];
                } else {
                    var lineleft = data[0];
                }
                if (data[1] >> data[3]) {
                    var linetop = data[1];
                } else {
                    var linetop = data[3];
                }
    
                $('body').append('<img class="line" src="/lines/line-'+lineColor+'.png" style="position:absolute;top:'+linetop+';left:'+lineleft+';width:'+width+'px;height:'+height+'px;color:'+lineColor+';"/>');
            }
    
            $.fn.line.data = function(coords) {
                if (coords.length == 2) {
                    if ( ! $('#line').data('point1') ) { 
                        $('#line').data('point1', {x: coords[0], y: coords[1]});
                        bothpoints = false;
                    } else {
                        $('#line').data('point2', {x: coords[0], y: coords[1]});
                        bothpoints = true;
                    }
                    $.line.draw();
                } else if (coords == 1) {
                    $('#line').data('point1', false);
                    bothpoints = false;
                } else if (coords == 2) {
                    $('#line').data('point2', false);
                    bothpoints = false;
                } else if (!coords) {
                    return [$('#line').data('point1').x, $('#line').data('point1').y, $('#line').data('point2').x, $('#line').data('point2').y];
                }
            }
    
            $.fn.line.point = function() {
                if (!($.line.data().length == 4)) {
                    var _posY = posy, _posX = posx;
                    $('body').append('<div class="point" style="position:absolute; top:' + _posY + 'px; left:' + _posX + 'px;"></div>');
                    $.line.data([_posX, _posY]);
                    if (bothpoints == true) {
                        $.line.draw();
                    }
                }
            }
    
            $.fn.line.unpoint = function() {
                this.hide('fast');
                if ($.line.data()[0] == this.offset()['left'] && $.line.data[1] == this.offset()['top']) {
                    $.line.data(1);
                } else {
                    $.line.data(2);
                }
                $.line.erase();
            }
    
    
            $.fn.line.erase = function(total) {
                if (total == true) {
                    $('img.line').hide('fast');
                    $('div.point').hide('fast');
                    $.line.data(1);
                    $.line.data(2);
                } else {
                    $('img.line').hide('fast');
                }
            }
    
            if ( coordinates.length == 4) {
                $.line.data([coordinates[0], coordinates[1]]);
                $.line.data([coordinates[2], coordinates[3]]);
                $.line.draw();
            }
    
        };
    
        var posx, posy;
    
        $(document).ready(function(){
            $(document).on('mousemove', function(e) {
                if (!e) var e = window.event;
                if (e.pageX || e.pageY)     {
                    posx = e.pageX;
                    posy = e.pageY;
                }
                else if (e.clientX || e.clientY)    {
                    posx = e.clientX + document.body.scrollLeft
                        + document.documentElement.scrollLeft;
                    posy = e.clientY + document.body.scrollTop
                        + document.documentElement.scrollTop;
                }
            }
            $.line();
            $('head').append('<meta id="line" />');
            $('#lineRegion').click( $.line.point() );
            $('.point').click( $.line.unpoint() );
            $('.lineEraser').click( $.line.erase(true) );
        }
    
    })( jQuery );