/    Sign up×
Community /Pin to ProfileBookmark

Need help in no repeat numbers in looping number picker

Copy linkTweet thisAlerts:
Oct 03.2012

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() ;
}
}
}
[/code]

This is where I left off after pulling all of my hair out!
Thanks for looking.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@xelawhoOct 03.2012 — 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>
[/CODE]
Copy linkTweet thisAlerts:
@BaldyauthorOct 03.2012 — 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!!!!!
Copy linkTweet thisAlerts:
@xelawhoOct 03.2012 — 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>
[/CODE]
Copy linkTweet thisAlerts:
@BaldyauthorOct 04.2012 — 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.
Copy linkTweet thisAlerts:
@BaldyauthorOct 04.2012 — 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.
Copy linkTweet thisAlerts:
@xelawhoOct 04.2012 — 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.
Copy linkTweet thisAlerts:
@BaldyauthorOct 04.2012 — 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.
<i>
</i>&lt;script type="text/javascript"&gt;
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&lt;input+1; x++){
nums.push(x)
}
loop();
}

function loop() { //looping counter
if (i &lt;= 10) {
document.getElementById('looper').innerHTML = nums[c++%nums.length]; //displays the looping numbers in div looper
t = setTimeout(loop, s); <br/>
}
}

<i> </i>function display_number(){ //display a number from looping counter onclick
<i> </i>if(nums.length==0){return;}
<i> </i> clearTimeout(t);

<i> </i> var thenum=document.getElementById('looper').innerHTML;
<i> </i> document.getElementById('numbers').innerHTML += thenum+ " "; //numbers div where picked number is displayed
<i> </i> for(var j = 0; j&lt;nums.length; j++){
<i> </i> if(thenum==nums[j]){
<i> </i> nums.splice(j,1)
<i> </i> }
<i> </i> }
<i> </i> if (nums.length&gt;1){
<i> </i> loop();
<i> </i> } else {
<i> </i> document.getElementById('numbers').innerHTML +=nums.pop();
<i> </i> document.getElementById('looper').innerHTML="";
<i> </i> s = document.getElementById('speed').value ;
<i> </i> }
<i> </i> }



<i> </i>function clear_board() {
<i> </i> document.getElementById('numbers').innerHTML = '';
<i> </i> document.getElementById('input').focus();
<i> </i> start_counter() ;
<i> </i> loop();
<i> </i> a = 0 ;
<i> </i> s = document.getElementById('speed').value ;
<i> </i> }

<i> </i>function reset_counter() {
<i> </i> clearTimeout(t);
<i> </i> c = 1;
<i> </i> i = 1;
<i> </i> s = 0;
<i> </i> a = 0;
<i> </i> document.getElementById('looper').innerHTML = '';
<i> </i> document.getElementById('numbers').innerHTML = '';
<i> </i> document.getElementById('input').value = '';
<i> </i> document.getElementById('input').focus();
<i> </i> nums.length = 0;

<i> </i> }

&lt;/script&gt;

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.
Copy linkTweet thisAlerts:
@xelawhoOct 04.2012 — 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>
[/CODE]
Copy linkTweet thisAlerts:
@BaldyauthorOct 05.2012 — Bingo!!!

Perfect, you must have been doing this a long time.

Thanks a million xelawho, couldn't have done it by myself.
×

Success!

Help @Baldy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...