troubleshooting Question

Javascript: Selecting, displaying, and sorting numbers in an array

Avatar of swedesamurai
swedesamuraiFlag for Germany asked on
JavaScript
24 Comments1 Solution267 ViewsLast Modified:
Hi,
I'm trying to write a Number Picking System in Javascript.  I want to pick a number that is a value from an image (There are 50 such numbers), This number should then be shown in an input text field as it is picked.  It needs to be sorted from lowest to highest and no duplicates can be allowed.  I have worked with some scripts that I have obtained here but somehow it does not do what I want.  First it shows the array max number on first click, then it fills the field range with undefined, and does not sort, nor prevents duplicates from appearing.  I have very limited Javascript knowledge, I am an old AS400 RPG III Programmer so even though Javascript seems easy for everyone for me it has me lost.  Any help would be appreciated.  I am enclosing the code that I have obtained below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 
<!--Javascript Select Numbers- Row01-->
<script type="text/javascript">
function chooseT1N(min,max,quantity){
      var arrT1N=new Array();
      var i=0
	  var n=1, ele, tn=0;
      while(ele=document.getElementById((n<10?"N0":"N")+n)){
        ele.onclick=function(){
    	var Index=this.value;
    		if(Index!=0) {
         document.getElementById("T1N"+(tn<5?++tn:tn=1)).value = this.getAttribute('value');
         }
    	}
   		 var intT1N =  n++;
            var accept=true;
            for( var j=0;j<quantity;++j)
		        if( intT1N == arrT1N[j])
                  {
                        accept=false;
                        break;
                  } 
            }
            if(accept)
            {
                  arrT1N[i++] = intT1N;
            }
      
return arrT1N;
}
function sorter(a,b){
return (a - b);
}
function getT01N(){
	var fields=["T1N1","T1N2","T1N3","T1N4","T1N5"];
	var seq = chooseT1N(1,0,fields.length);
	seq.sort(sorter);
	for( var i=0; i < fields.length; ++i)
	{
		document.getElementById(fields[i]).value=seq[i];
	}
}
 
 
</script>
 
 
<!--Javascript Random Numbers- Row01-->
<script type="text/javascript">
function randomT1N(min,max,quantity)
{
      var arrT1N=new Array();
      var i=0
      while(i < quantity)
      {
            var intT1N = Math.floor(Math.random() * (max - min + 1) + min);
            var accept=true;
            for( var j=0;j<quantity;++j)
            {
                  if( intT1N == arrT1N[j])
                  {
                        accept=false;
                        break;
                  } 
            }
            if(accept)
            {
                  arrT1N[i++] = intT1N;
            }
      }
return arrT1N;
}
function sorter(a,b){
return (a - b);
}
function getT1N(){
	var fields=["T1N1","T1N2","T1N3","T1N4","T1N5"];
	var seq = randomT1N(1,50,fields.length);
	seq.sort(sorter);
	for( var i=0; i < fields.length; ++i)
	{
		document.getElementById(fields[i]).value=seq[i];
	}
}
 
function randomT1S(min,max,quantity)
{
      var arrT1S=new Array();
      var i=0
      while(i < quantity)
      {
            var intT1S = Math.floor(Math.random() * (max - min + 1) + min);
            var accept=true;
            for( var j=0;j<quantity;++j)
            {
                  if( intT1S == arrT1S[j])
                  {
                        accept=false;
                        break;
                  } 
            }
            if(accept)
            {
                  arrT1S[i++] = intT1S;
            }
      }
return arrT1S;
}
function sorter(a,b){
return (a - b);
}
function getT1S(){
	var fields=["T1S1","T1S2"];
	var seq = randomT1S(1,9,fields.length);
	seq.sort(sorter);
	for( var i=0; i < fields.length; ++i)
	{
		document.getElementById(fields[i]).value=seq[i];
	}
}
 
 
function setscznrz1() {
      var form = document.forms["form"];
      form.SCZNRZ1 = form.SCZNRZ1.value = form.T1N1.value + "-"  + form.T1N2.value + "-" + form.T1N3.value + "-"  + form.T1N4.value + "-" + form.T1N5.value + "-"  + form.T1S1.value + "-" + form.T1S2.value;
}
 
 
</script>
 
 
 
 
</head>
 
 
<body>
 
		<form class="form" name="form"  />
   				<input type="hidden" name="SCZNRZ1" id="SCZNRZ1"  />
 
                
                		<table width="100" >
                          <tr>
                          	<td><img src="./img/Ball01.png" id="N01" value="01" width="27" height="27" onclick="getT01N()"/></td>
							<td><img src="./img/Ball02.png" id="N02" value="02" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball03.png" id="N03" value="03" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball04.png" id="N04" value="04" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball05.png" id="N05" value="05" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball06.png" id="N06" value="06" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball07.png" id="N07" value="07" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball08.png" id="N08" value="08" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball09.png" id="N09" value="09" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball10.png" id="N10" value="10" width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                          	<td><img src="./img/Ball11.png" id="N11" value="11" width="27" height="27" onclick="getT01N()"/></td>
							<td><img src="./img/Ball12.png" id="N12" value="12" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball13.png" id="N13" value="13" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball14.png" id="N14" value="14" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball15.png" id="N15" value="15" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball16.png" id="N16" value="16" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball17.png" id="N17" value="17" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball18.png" id="N18" value="18" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball19.png" id="N19" value="19" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball20.png" id="N20" value="20" width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                          	<td><img src="./img/Ball21.png" id="N21" value="21" width="27" height="27" onclick="getT01N()"/></td>
							<td><img src="./img/Ball22.png" id="N22" value="22" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball23.png" id="N23" value="23" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball24.png" id="N24" value="24" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball25.png" id="N25" value="25" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball26.png" id="N26" value="26" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball27.png" id="N27" value="27" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball28.png" id="N28" value="28" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball29.png" id="N29" value="29" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball30.png" id="N30" value="30" width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                          	<td><img src="./img/Ball31.png" id="N31" value="31" width="27" height="27" onclick="getT01N()"/></td>
							<td><img src="./img/Ball32.png" id="N32" value="32" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball33.png" id="N33" value="33" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball34.png" id="N34" value="34" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball35.png" id="N35" value="35" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball36.png" id="N36" value="36" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball37.png" id="N37" value="37" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball38.png" id="N38" value="38" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball39.png" id="N39" value="39" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball40.png" id="N40" value="40" width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                          	<td><img src="./img/Ball41.png" id="N41" value="41" width="27" height="27" onclick="getT01N()"/></td>
							<td><img src="./img/Ball42.png" id="N42" value="42" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball43.png" id="N43" value="43" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball44.png" id="N44" value="44" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball45.png" id="N45" value="45" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball46.png" id="N46" value="46" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball47.png" id="N47" value="47" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball48.png" id="N48" value="48" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball49.png" id="N49" value="49" width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Ball50.png" id="N50" value="50" width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
</table>
 
					  <table>
                          <tr>
                            <td><img src="./img/Blank.png" width="36" height="36" /></td>
                            <td><img src="./img/Blank.png" width="36" height="36" /></td>
                            <td><img src="./img/Blank.png" width="36" height="36" /></td>
                          </tr>
                          <tr>
                            <td><img src="./img/Star01.png" id="S01" value="01"  width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Star02.png" id="S02" value="02"  width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Star03.png" id="S03" value="03"  width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                            <td><img src="./img/Star04.png" id="S04" value="04"  width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Star05.png" id="S05" value="05"  width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Star06.png" id="S06" value="06"  width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                            <td><img src="./img/Star07.png" id="S07" value="07"  width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Star08.png" id="S08" value="08"  width="27" height="27" onclick="getT01N()"/></td>
                            <td><img src="./img/Star09.png" id="S09" value="09"  width="27" height="27" onclick="getT01N()"/></td>
                          </tr>
                          <tr>
                            <td><img src="./img/Blank.png" width="36" height="36" /></td>
                            <td><img src="./img/Blank.png" width="36" height="36" /></td>
                            <td><img src="./img/Blank.png" width="36" height="36" /></td>
                          </tr>
					  </table>
                          <table class="table3" width="100%" >
                          <tr>
                          	<th><p>Quick<br/>Pick</p></th>
	                        <th><p>Row<br/> Nr.</p></th>
                            <th><p>Ball<br/>01</p></th>
                            <th><p>Ball<br/>02</p></th>
                            <th><p>Ball<br/>03</p></th>
                            <th><p>Ball<br/>04</p></th>
                            <th><p>Ball<br/>05</p></th>
                            <th><p>Star<br/>01</p></th>
                            <th><p>Star<br/>02</p></th>
                            <th>&nbsp;</th>
                            <th><p>Price</p></th>
                            <th>&nbsp;</th>
                            <th><p>Purchase</p></th>
                          </tr>
                          
                          <tr>
                          
                          
                          	<td><div class="formField2"><INPUT TYPE="button"  VALUE="Quick Pick" STYLE="font-family:Arial, Helvetica, sans-serif; font-size:large; font-style:italic; background:#CC0000 none; color:#FFFF00; width:10em width="63" height="27" onclick="getT1N();getT1S();setscznrz1();" />
                          	</div></td>
	                        <td><div class="formField2"><img src="./img/Row01.png" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1N1" id="T1N1" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1N2" id="T1N2" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1N3" id="T1N3" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1N4" id="T1N4" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1N5" id="T1N5" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1S1" id="T1S1" width="27" height="27" /></div></td>
                            <td><div class="formField2"><input type="text" name="T1S2" id="T1S2" width="27" height="27" /></div></td>
                            <td><div class="formField2">&nbsp;</div></td>
                            <td><div class="formField2"><input type="input" name="TIPPRR1" id="TIPPRR1"  width="54" height="27" /></div></td>
                            <td><div class="formField2"><input type="input" name="TIPCRR1" id="TIPCRR1"  width="54" height="27" /></div></td>
                            <td><div class="formField2"><img src="./img/Purchase02.png" width="54" height="27"/></div></td>
                          </tr>
                      </table>
</form>
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 24 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 24 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros