Question

I am using Jquery to grab the input value as numbers are typed in it. As well as drawing out circles on a div #canvas_container with raphaeljs based on the number inputted. Currently I am trying to set a maximum input value like if (value <= 50) { where value is the input of the user.

What I want to achieve eventually is if the user types in 30, 30 circles are drawn. If the user types in 60 or any value 50 and above 50 circles are drawn. Creating a maximum amount of circles drawn to the canvas_container. Right now I am just trying to get nothing to happen when any value 50 and above is inputted, but some circles are drawn but only a few, I am not sure why.

http://jsfiddle.net/anderskitson/sHNHe/9/

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

    if (value <= 50) {

    if (value === "") {
        var circle = paper.circle(110, 50, 30);
        var clear = paper.clear();
    } else {

        for (i = 0; i <= value; i++) {

            var randomNumber1 = Math.floor(Math.random() * 201) - 100;
            var randomNumber2 = Math.floor(Math.random() * 201) - 100;

            var plusOrMinus = Math.random() < 0.5 ? -1 : 100;

            var circle = paper.circle(randomNumber1, randomNumber2, 20);
        }
    }

    }else {
        //this should run if a value of 50 or above is entered
        }

}).keyup();

Answer 1

As far as I can see, you’ve got two errors:

1. You need to clear your paper on every keyup, else the new circles will be added to the “old” ones on every keyup()
2. Your handling if value > 50 is a bit complicated

Let’s fix that (in a simplified version):

var paper = new Raphael(25, 25, 500, 500);
$("input").keyup(function() {
    var value = parseInt($(this).val());
    paper.clear();

    if (value > 50) {
        value = 50;
    }

    for (i = 0; i < value; i++) {

        var randomNumber1 = 50 + 5 * i;
        var randomNumber2 = 50 + 5 * i;

        var circle = paper.circle(randomNumber1, randomNumber2, 20);
    }
});​

Have a look at the Fiddle, I hope this is what you wanted to achieve.