if 문을 사용하여 입력 필드의 최대 값 설정

Question

숫자가 입력 될 때 입력 값을 얻기 위해 Jquery를 사용하고 있습니다. div에 서클을 그리는 것 #canvas_container는 입력 된 숫자에 따라 raphaeljs를 사용합니다. 현재 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

지금까지 내가, 당신이 두 개의 오류가있어 볼 수 있습니다 : 당신은 모든의 keyup에 용지를 제거 할 필요가

1. 을, 다른 새로운 원이 추가됩니다 값> (50)가 복잡 비트가 모든의 keyup의 "이전"사람은()
2. 귀하의 처리

의가 (단순화 된 버전에서) 그 문제를 해결하자

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에서보세요, 나는 이것이 당신이 달성하기 위해 원하는 것을 바랍니다.