0

I came across a book giving a tutorial and partial code for building a coloring book, in HTML and JavaScript. I have setup a project in jsbin to test my code, and hopefully it can be shared with you all at this link: my source code

I would like the user to be able to select a color and then click on an area in the svg, where it is then applied. Currently when you click on a color, nothing happens.

Harriet
  • 1,633
  • 5
  • 22
  • 36

1 Answers1

0

It would be better if you cut down your code to a simple test case.

However, I noticed a couple of things wrong:

  1. You are trying to attach events to paths with class colorable. However there aren't any of those in your SVG.

  2. jQuery functions that operate on classes will not work with SVG elements. This is because the class attribute of an SVG elements is not the same type as the class element of an HTML element. So path[class="colorable"] won't work.

    You'll need to use change this code:

    $('path[class="colorable"]').bind("click", function(event) { 
  // colour changing code
})

    to something like:

    var paths = document.getElementsByClassName("colorable");
for (var i=0; i<paths.length; i++) {
   $(paths[i]).bind("click", function(event) { 
      // Your colouring code
   });
}
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Hello @Paul LeBeau - thank you for pointing out about the colourable class. I copied another svg in the place of one that the tutorial used. This one uses "node", so I used "node" instead. Where exactly should I use the piece of code you propose, and in what context? – Harriet Sep 21 '15 at 10:42
  • Is there anyone out there willing to give this a try? I am still struggling with it... – Harriet Sep 21 '15 at 12:38
  • Use it instead of the `$('path[class="node"]').bind("click", function(event) {...etc...})`. Except `colorable` to `node`. – Paul LeBeau Sep 21 '15 at 17:36
  • BTW, by changing the class name in your original jsbin, you have made my answer not make sense any more. Anyone reading this question in the future may be confused. – Paul LeBeau Sep 21 '15 at 17:41
  • I actually found another tutorial which is a bit better - so I got another sample code working. thanks for your efforts though. – Harriet Sep 22 '15 at 12:49