title: Selecting a node in Raphael/JavaScript
body: <p>The following code mostly works (thanks to a good answer a couple of days ago!) all except for the last little bit:</p>
  
  <pre><code>things.square[1].node.setAttribute("id","clicker");
  $("#clicker").click(function(){
      $("#canvas_things1").fadeOut();
      $("#canvas_things2").fadeIn();
  });
  </code></pre>
  
  <p>I think the problem is this line:</p>
  
  <pre><code>things.square[1].node.setAttribute("id","clicker");
  </code></pre>
  
  <p>I would have thought that square[1].node would work, but it seems not. Can someone spot what's wrong?</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $("document").ready(function() {
          var RM  = Raphael("canvas", 1000, 500);
  
          var attr = {     // for the visible shapes
              fill: "#bbb",      "fill-opacity": 1,
              stroke: "#222",    "stroke-width": 0.3,
          };
          var attr2 = {    // for the invisible hovering areas
              fill: "green",     "fill-opacity": 0.0,
              stroke: "red",     "stroke-width": 0,
          };
          var things = {};
          /* Square */    things.square     = [ RM.path("m 154.21525,71.431259 74.32805,0 0,70.496711 -74.32805,0 0,-70.496711 z").attr(attr),
                                                RM.path("m 271.25132,77.933263 58.07304,0 0,56.409037 -58.07304,0 0,-56.409037 z").attr(attr2)   ];
          /* Triangle */  things.triangle   = [ RM.path("m 154.02932,222.44063 36.78089,-58.23641 34.48208,58.2364 -71.26297,1e-5").attr(attr),
                                                RM.path("m 271.25132,165.71032 58.07304,0 0,56.40903 -58.07304,0 0,-56.40903 z").attr(attr2)   ];
          for (var shape in things) {
              shape[0].color = Raphael.getColor();
              (function (shape, sh) {
                  shape[1][0].onmouseover = function () {
                      shape[0].animate({fill:shape[0].color, stroke:"#ccc"}, 500);
                      document.getElementById(sh)[0].style.display = "block";
                      shape[0].toFront();   R.safari();
                  };
                  shape[1][0].onmouseout = function () {
                      shape[0].animate({fill:"#bbb", stroke:"#222"}, 500);
                      document.getElementById(sh)[0].style.display = "none";
                      shape[0].toFront();   R.safari();
                  };
              })(things[sh], sh);
          } // end for every member of things
  
          things.square[1].node.setAttribute("id","clicker");
          $("#clicker").click(function(){
              $("#canvas_things1").fadeOut();
              $("#canvas_things2").fadeIn();
          });
  
      }); // end the document ready function
  &lt;/script&gt;
  </code></pre>