if文を使用して入力フィールドの最大値を設定する

Question

Jqueryを使用して数値を入力するときに入力値を取得しています。入力された数字に基づいて、#canvas_containerのdivでサークルを描くだけでなく、ラファエルを使用して描画します。現在、私はif (value <= 50) {のような最大入力値を設定しようとしていますが、valueはユーザーの入力です。

私が最終的に達成したいのは、ユーザーが30を入力すると、30個の円が描かれます。ユーザーが60または50以上の値を入力すると、50個の円が描画されます。 canvas_containerに描画される円の最大量を作成する。今は50以上の値が入力されたときに何も起こらないようにしようとしていますが、いくつかの円は描かれていますが、少数しか描かれていません。

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

私の知る限り見ることができるように、あなたは2つのエラー持っている：

1. を新しい円が追加されますそれ以外の、すべてのkeyUpイベントであなたの論文をクリアする必要があります
2. 値> 50の場合の処理​​は少し複雑です。

のは、（簡易版で）それを修正してみましょう：

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); 
    } 
});​ 

が Fiddleを見てください、私は、これはあなたが達成したいものです願っています。