CODEWITHSUNDEEP
javascripthtmlraphaelmodernizr
gilbertbw
gilbertbw

Reputation: 690

Function 'is not defined' when it is

I have drawn a map in Inkscape, saved it as SVG and used http://readysetraphael.com/ to convert it to Raphial. I put this generated code into a function called drawMap and I have saved this in js/map.js

js/map.js:

function drawMap(){
 var map = Raphael('map', '100mm', '100mm');
 var layer4 = map.set();
 var path3041 = map.path("m 106.15571,153.07817 -1.64315,13.74999 4.60661,10.36488 6.04618,9.21323 9.21323,3.16705 6.04618,6.04618 8.34949,8.06157 77.4487,1.72748 3.45496,-48.79108 z");
 path3041.attr({id: 'path3041',parent: 'layer4',opacity: '0.98999999',fill: '#ffb380',stroke: '#000000',"stroke-width": '3',"stroke-linecap": 'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke-opacity": '1',"stroke-dasharray": 'none'}).data('id', 'path3041');
 layer4.attr({'id': 'layer4','name': 'layer4'});

 //etc, more lines than stackoverflow will let me add

var mapGroups = [layer4,layer5,layer19,layer20,layer21,layer22,layer23,layer24,layer25,layer26,layer6,layer7,layer8,layer9,layer10,layer1,layer3,layer11,layer12,layer13,layer14,layer15,layer16,layer17,layer18,layer27,layer28,layer29,layer30,layer31,layer32,layer33,layer34,layer35,layer36,layer37,layer38,layer39,layer40,layer41,layer42,layer43,layer44,layer45];
}

I then put raphael-min.js and into the 'js' folder.

When I called drawMap() firebug said:

"drawMap is not defined"

I added the containts of map.js into the html file but I recived the error "Raphial is not defined".

I assumed this was as raphial was being called before raphial-min.js had loaded so I used Modernizer to load raphial-min.js and map.ja before calling drawMap() but now I get the error:

"drawMap is not defined"

Index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Risk</title>
    <script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
    </head>
    <body>
    <div id="map">
    <script type="text/javascript">
        drawMap()
        Modernizr.load({
            load: 'js/raphael-min.js',
            load: 'js/map.js',
            complete: drawMap()
        })
    </script>
    </div>
</body>
</html>

Upvotes: 0

Views: 737

Answers (2)

jfriend00
jfriend00

Reputation: 707218

Several issues with the Modernizr implementation.

  1. In the complete property, you should not be calling drawMap, just referring to it and since it's not loaded yet, you have to refer to it in an anonymous inline function.
  2. You should not be calling drawMap() before loading it.
  3. In the Modernizr.load() syntax, javascript doesn't let you use multiple load properties on the same object.

So this:

drawMap();
Modernizr.load({
    load: 'js/raphael-min.js',
    load: 'js/map.js',
    complete: drawMap()
})

should be this:

Modernizr.load({
    load: ['js/raphael-min.js', 'js/map.js'],
    complete: function() {drawMap();}
})

Also, I don't know why you're dynamically loading these. It probably isn't necessary. you could just do this:

<script src="js/raphael-min.js"></script>
<script src="js/map.js"></script>
<script>
drawMap();
</script>

Upvotes: 2

Daniel A. White
Daniel A. White

Reputation: 190907

drawMap is being called before the script file is loaded.

Upvotes: 1

Related Questions