Question

I am using Jquery .keyup and .val to grab what I type into a form input. Then I place the value in a variable. After I draw a circle to some paper I created with raphael. I am wanting to modify a path based apon the variable I created with the form input. Right now I can put numeric inputs into the input field and a different circle size is drawn. What I want to do is change a point on a path var path = paper.path("M 250 250 l 0 -50 l -10 0 l 0 50 z" ); with the value of what is being typed so it looks like this var path = paper.path("M 200 250 l 0 -50 l -10 0 l 0 value z" );

So the first var path should change one of it’s points when you type 100 into the input field to 100. Right now it does nothing.

What I am attempting to do eventually is have a progress bar that changes size based on what is being typed into three different input fields. If there is another approach you would, I am totally open.

http://jsfiddle.net/anderskitson/XPwrj/1/

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
  $("input").keyup(function () {
        var value = $(this).val();

        //var paper = Raphael(10, 50, 320, 200);
          var circle = paper.circle(50, 40, value);
          var path = paper.path("M 200 250 l 0 -50 l -10 0 l 0 value  z"  );
          var path = paper.path("M 250 250 l 0 -50 l -10 0 l 0 50  z"  );
          /*path.animate({  
            path: "M 250 250 l 0 -100 l -10 0 l 0 100  z"  
        }, 5000, 'elastic');*/

      }).keyup();

Answer 1

Your code is using “value” as a part of the string, not a variable.
Change your path code to

var path = paper.path("M 200 250 l 0 -50 l -10 0 l 0 "+value+"  z"  );