html5 - Need help applying selected color to fill property in svg -

i came across book giving tutorial , partial code building coloring book, in html , javascript. have setup project in jsbin test code, , can shared @ link: my source code

i user able select color , click on area in svg, applied. when click on color, nothing happens.

it better if cut down code simple test case.

however, noticed couple of things wrong:

1. you trying attach events paths class colorable. there aren't of in svg.

2. jquery functions operate on classes not work svg elements. because class attribute of svg elements not same type class element of html element. path[class="colorable"] won't work.

   you'll need use change code:

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

   to like:

   var paths = document.getelementsbyclassname("colorable"); (var i=0; i<paths.length; i++) {    $(paths[i]).bind("click", function(event) {        // colouring code    }); }