www.webdeveloper.com
Results 1 to 10 of 10

Thread: Need help in no repeat numbers in looping number picker

  1. #1
    Join Date
    Oct 2012
    Posts
    15

    Need help in no repeat numbers in looping number picker

    Hi, I am very new at this and am having problems trying to get this number picker to display numbers without repeating the ones already picked. The number is picked from a looping number counter. I have been trying every configuration of code I can think of and nothing works, I have even tried using an array and didn't work. My understanding of javascript is not all that great, please someone help, here's what I've got ...
    Code:
    function start_counter() { //looping counter
    	if (i <= 10) {
    		var input = document.getElementById('input').value; 
    		c++;
    		document.getElementById('looper').innerHTML = c; //displays the looping numbers in div looper
    		if(c>input) c=1;
    		t = setTimeout("start_counter()", s);  
    		
    		}
    	}
    
    	function display_number(){ //display a number from looping counter onclick
            clearTimeout(t);
    		if (a <= 30) //iterations
    			document.getElementById('numbers').innerHTML +=(c + " "); //numbers div where picked number is displayed
    			start_counter() ;
    			for(var j = 1; j<i; j++){
    			if(document.getElementById('looper'+j).innerHTML==c);{ 
    			document.getElementById('numbers').innerHTML +=(c + " ");
    			display_number() ;
                }    
    		}		
        }
    This is where I left off after pulling all of my hair out!
    Thanks for looking.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,043
    I don't know what the values for a,c,i or s are supposed to be, so I just made them up. It seems to me that you need to get an array of numbers, then as each number is chosen, remove it from the array...
    Code:
    <body>
    <input id="input"></div>
    <div id="numbers"></div>
    <div id="looper"></div>
    <input type="button" onclick="start_counter()" value="start"/>
    <input type="button" onclick="display_number()" value="show number"/>
    <script type="text/javascript"> 
    var i=1;
    var c=0;
    s=100;
    a=10;
    var nums=[];
    
    function start_counter() {
    c=0;
    var input = Number(document.getElementById('input').value);
    for(var x = 1; x<input+1; x++){
    nums.push(x)
    	}
    loop();	
    }	
    
    function loop() { //looping counter
    	if (i <= 10) {
    		 document.getElementById('looper').innerHTML = nums[c++%nums.length]; //displays the looping numbers in div looper
    		t = setTimeout(loop, s);  
    		}
    	}
    
    	function display_number(){ //display a number from looping counter onclick
            clearTimeout(t);
    		if (a <= 30) //iterations
    		var thenum=document.getElementById('looper').innerHTML;
    			document.getElementById('numbers').innerHTML +=thenum+" "; //numbers div where picked number is displayed
    			for(var j = 0; j<nums.length; j++){
    			if(thenum==nums[j]){
    			nums.splice(j,1)
    			}
            }    
    		if (nums.length>0){
    		loop();
    		} else {
    		document.getElementById('looper').innerHTML="";
    			}
    		}
    </script>
    </body>

  3. #3
    Join Date
    Oct 2012
    Posts
    15
    Wow, that was quick! Thanks for the reply and your code works great.
    I tried doing the same thing but didn't really know what I was doing.
    Works like a charm, I thank you very much for your time and expertise.
    Have a great day and thanks again!!!!!

  4. #4
    Join Date
    Nov 2010
    Posts
    1,043
    you're welcome. A couple of modifications in case of multiple button-pressing, etc...

    Code:
    <script type="text/javascript"> 
    var i=1;
    var c=0;
    s=100;
    a=10;
    var nums;
    var t;
    
    function start_counter() {
    nums=[];
    if(t){clearTimeout(t);}
    document.getElementById('numbers').innerHTML="";
    c=0;
    var input = Number(document.getElementById('input').value);
    for(var x = 1; x<input+1; x++){
    nums.push(x)
    	}
    loop();	
    }	
    
    function loop() { //looping counter
    	if (i <= 10) {
    		 document.getElementById('looper').innerHTML = nums[c++%nums.length]; //displays the looping numbers in div looper
    		t = setTimeout(loop, s);  
    		}
    	}
    
    	function display_number(){ //display a number from looping counter onclick
    	if(nums.length==0){return;}
            clearTimeout(t);
    		if (a <= 30) //iterations
    		var thenum=document.getElementById('looper').innerHTML;
    			document.getElementById('numbers').innerHTML +=thenum+" "; //numbers div where picked number is displayed
    			for(var j = 0; j<nums.length; j++){
    			if(thenum==nums[j]){
    			nums.splice(j,1)
    			}
            }   
    		if (nums.length>1){
    		loop();
    		} else {
    		document.getElementById('numbers').innerHTML +=nums.pop()
    		document.getElementById('looper').innerHTML="";
    			}
    		}
    </script>

  5. #5
    Join Date
    Oct 2012
    Posts
    15
    Thanks for spending so much time on this, would have taken me weeks and probably end up with the same thing I started with. Only one thing though, when I click the reset button to clear the looper division, It has to be clicked several times. I'm trying to figure out how to do it in one click but getting nowhere. Is this because of the array or something? Otherwise this is exactly what I was looking for. The input boxes clear fine but the innerhtml is sticky.Thanks.
    Last edited by Baldy; 10-04-2012 at 02:25 AM. Reason: forgot something

  6. #6
    Join Date
    Oct 2012
    Posts
    15
    I think I got it figured out now, thank you.
    nums.length = 0; works good but leaves "undefined" in the division unless I reset a couple of times.

  7. #7
    Join Date
    Nov 2010
    Posts
    1,043
    there's a reset button? the code I posted in #4 resets everything relevant when you hit the start button again... if you're still struggling on this you can post your code so far.

  8. #8
    Join Date
    Oct 2012
    Posts
    15
    I already had some buttons to run the script so I just used the ones I had. I didn't think the entire code would be relevant so I only posted the number counter and the "display number" code. Here is the whole story and entire code.
    The looping counter works good and displays the numbers where and when I want but I found two issues I'd like to fix if possible. First, this is a lottery number picker of sorts that I didn't want to use the random function like other sites, there are a million of them already. I want the looping number type of picker and it works good for me. one issue is the reset issue that I mentioned, then there is a speed variable which is the var "s" for speed and id="speed". I used a html5 "number" input box with the little arrows in it to adjust the timeout. When I pick a set of numbers and then clear the "numbers" division with "clear board", it seems to bypass the speed variable and starts speeding up when I go to pick additional sets of numbers. I added code to try and work that out but doesn't seem to stay the same speed when I clear the numbers division. When I clear the numbers div the numbers in the looper keep looping and this is what I want so as to pick additional numbers. Here is the complete code, I have a "start" button, a "clear board" button" (clears numbers div) and a "reset" button which should reset all of the values to when the page first loads.
    Code:
    <script type="text/javascript">
    var t;
    var c = 0;
    var i = 1;
    var s = 0;
    var a = 0;
    var input = 0 ;
    var nums=[];
    
    function start_counter() {
    nums=[];
    if(t){clearTimeout(t);}
    document.getElementById('numbers').innerHTML="";
    c=0;
    var input = Number(document.getElementById('input').value);
    for(var x = 1; x<input+1; x++){
    nums.push(x)
    	}
    loop();	
    }	
    
    function loop() { //looping counter
    	if (i <= 10) {
    		 document.getElementById('looper').innerHTML = nums[c++%nums.length]; //displays the looping numbers in div looper
    		t = setTimeout(loop, s);  
    		}
    	}
    
    	function display_number(){ //display a number from looping counter onclick
    	if(nums.length==0){return;}
            clearTimeout(t);
    		
    		var thenum=document.getElementById('looper').innerHTML;
    			document.getElementById('numbers').innerHTML += thenum+ " "; //numbers div where picked number is displayed
    			for(var j = 0; j<nums.length; j++){
    			if(thenum==nums[j]){
    			nums.splice(j,1)
    			}
            }   
    		if (nums.length>1){
    		loop();
    		} else {
    		document.getElementById('numbers').innerHTML +=nums.pop();
    		document.getElementById('looper').innerHTML="";
    		s = document.getElementById('speed').value ;
    			}
    		}
    
              
    		 
    	function clear_board() {
    		document.getElementById('numbers').innerHTML = '';
    		document.getElementById('input').focus();
    		start_counter() ;
    		loop();	
    		a = 0 ;
    		s = document.getElementById('speed').value ;
    		} 
    		
    	function reset_counter() {
    		clearTimeout(t);
    		c = 1;
    		i = 1;
    		s = 0;
    		a = 0;
    		document.getElementById('looper').innerHTML = '';
    		document.getElementById('numbers').innerHTML = '';
    		document.getElementById('input').value = '';
    		document.getElementById('input').focus();
    		nums.length = 0;
    		
    		}	
    
    </script>
    I feel as though I have wasted your time now, sorry for not explaining more thoroughly in the first place. I hope I have included everything this time. Oh yeah...the var a is for iterations, not important.
    Last edited by Baldy; 10-04-2012 at 02:01 PM.

  9. #9
    Join Date
    Nov 2010
    Posts
    1,043
    I think the only problem was that you were calling both loop() and start_counter() in the clear_board() function - note that start_counter() already calls the loop function, which kicks off the whole thing - by calling it and loop you are effectively calling it twice. It would also seem to me that you would want to get the value of "s" inside the first place where it is used, ie, loop(), rather than wait until clear_board to redefine it. Here's how I think it should look...

    Code:
    <script type="text/javascript">
    var t;
    var c = 0;
    var i = 1;
    var s = 0;
    var a = 0;
    var input = 0 ;
    var nums=[];
    
    function start_counter() {
    nums=[];
    if(t){clearTimeout(t);}
    document.getElementById('numbers').innerHTML="";
    c=0;
    var input = Number(document.getElementById('input').value);
    for(var x = 1; x<input+1; x++){
    nums.push(x)
    	}
    loop();	
    }	
    
    function loop() { //looping counter
    s = document.getElementById('speed').value;
    	if (i <= 10) {
    		 document.getElementById('looper').innerHTML = nums[c++%nums.length]; //displays the looping numbers in div looper
    		t = setTimeout(loop, s);  
    		}
    	}
    
    	function display_number(){ //display a number from looping counter onclick
    	if(nums.length==0){return;}
            clearTimeout(t);
    		
    		var thenum=document.getElementById('looper').innerHTML;
    			document.getElementById('numbers').innerHTML += thenum+ " "; //numbers div where picked number is displayed
    			for(var j = 0; j<nums.length; j++){
    			if(thenum==nums[j]){
    			nums.splice(j,1)
    			}
            }   
    		if (nums.length>1){
    		loop();
    		} else {
    		document.getElementById('numbers').innerHTML +=nums.pop();
    		document.getElementById('looper').innerHTML="";
    		s = document.getElementById('speed').value ;
    			}
    		}
    
              
    		 
    	function clear_board() {
    		document.getElementById('numbers').innerHTML = '';
    		document.getElementById('input').focus();
    		start_counter() ;
    		a = 0 ;
    		s = document.getElementById('speed').value;
    		} 
    		
    	function reset_counter() {
    		clearTimeout(t);
    		c = 1;
    		i = 1;
    		s = 0;
    		a = 0;
    		document.getElementById('looper').innerHTML = '';
    		document.getElementById('numbers').innerHTML = '';
    		document.getElementById('input').value = '';
    		document.getElementById('input').focus();
    		nums.length = 0;
    		
    		}	
    
    </script>

  10. #10
    Join Date
    Oct 2012
    Posts
    15
    Bingo!!!
    Perfect, you must have been doing this a long time.
    Thanks a million xelawho, couldn't have done it by myself.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles