Login/Register
Can't load Raphael.js library, appendChild method not found?
Asked Answered
Solved javascriptraphaelappendchild
Z

1

11

I'm trying to load raphael.js (downloaded and run locally) into an HTML file but the script refuses to exit, erroring out with this in my JS console:

Uncaught TypeError: 
Cannot call method 'appendChild' of null
bV                   on raphael.js:7
a                    on raphael.js:7
(anonymous function) on raphael.html:22

This is for the minified version, the same error occurs in the non-min version on line 1789.

I downloaded the code from the website, tried both compressed and uncompressed, as well as downloading the JS file linked in one of the demos, all of which work fine in my browser (chrome).

Any thoughts?

Zibeline answered 4/11, 2010 at 20:11 Comment(1)
Can you provide the code for raphael.html? I'm assuming raphael.js is a copy of: github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js ? – Contractive
P
28

I was having the same problem and it turned out to be a load order issue. Here's the original code:

<!doctype html>
<html>
  <head>
    <script src='raphael-1.5.2.js'></script>
    <script>
        var paper = Raphael(10, 50, 300, 250);
        var circle = paper.circle(50, 40, 10);
        circle.attr('fill', '#c00');
        circle.attr('stroke', '#fff');
    </script>
  </head>

  <body></body>
</html>

Turns out that when Raphael(10, 50, 300, 250) is called, it tries to append a canvas element to the body ... which doesn't exist yet. So wrapping it in a window.onload or jQuery onload function solved the problem:

<!doctype html>
<html>
  <head>
    <script src='raphael-1.5.2.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script>
      $(function () {
        var paper = Raphael(10, 50, 300, 250);
        var circle = paper.circle(50, 40, 10);
        circle.attr('fill', '#c00');
        circle.attr('stroke', '#fff');
      });
    </script>
  </head>

  <body></body>
</html>
Phlox answered 22/12, 2010 at 17:41 Comment(1)
June 2014, and the force is still strong in this one – Loadstar

© 2022 - 2024 — McMap. All rights reserved.