Array Creator 3

JavaScriptSource Staff Jan 23, 2008

General

Coding large arrays can be a bit of a repetitive chore. This script will create a generator that will help speed up the process. Easy to use and implement!

Notes

Created by: Mr. J
Web Site: http://www.huntingground.net/

When using the numerical value option enter the array length and an index value.
A number is then appended to the index value starting at 000.
A second value can also be added after the number by entering in the second textbox, if this is not required leave the box blank.
If the numerical value option is not used each individual array index value is typed in the text field, you can then either click the "Manual Enter" button or press the "Return" key to confirm your index value.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: arrayCreator.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Mr. J | http://www.huntingground.net/ */

function init(){
  array_name=document.f1.t1.value //name of array
  val2=document.f1.t3a.value
  ext=document.f1.t4.value
  for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
    if(document.f1.r1[r].checked==true){
      option=document.f1.r1[r].value // selected radio value
    }
  }

  if(option==0){
    document.getElementById("display").innerHTML=array_name+" = new Array(" // opening array type 1
  } else {
    document.getElementById("display").innerHTML=array_name+" = new Array()<br/>" // opening array type 2 & 3
  }

  if(document.f1.r2[0].checked==true){ // if indexed values
    make_array1()
  }

  if(document.f1.r2[1].checked==true){ // if non index values
    make_array2()
  }
}

function make_array1(){
  array_length=document.f1.t2.value-1 // length of array
  index_values=document.f1.t3.value // index value

  if(array_length==""||array_length==0){ // make sure a viable number is used
    document.getElementById("display").innerHTML="Please Enter a Number"
    document.f1.b2.disabled=true
    return
  } else {
    if(!ns){document.f1.cpy.disabled=false}
  }

  for(num=0;num<array_length;num++){
    j=num
    if(num<10){num="00"+num}
    if(num>9&&num<100){num="0"+num}
    if(document.f1.t4.value.length>0){
      i=num+val2+ext}
      else{i=num+val2}

  if(option==0){ // insert inner indexes for type 1
    document.getElementById("display").innerHTML+="\""+index_values+i+"\", "
  } else {
    if(option==1){ // insert inner indexes for type 2
      document.getElementById("display").innerHTML+=array_name+"["+j+"]="
      document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br/>"
    } else { // insert inner indexes for type 3
      document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br/>"
    }
  }
}

if(num<10){num="00"+num}
if(num>9&&num<100){num="0"+num}
if(num>100){num=num}

if(document.f1.t4.value.length>0){
  i= num+val2+ext}
  else{i=num+val2}

  if(option==0){ // insert last indexes for type 1
    document.getElementById("display").innerHTML+="\""+index_values+i+"\")"
  } else {
    if(option==1){ // insert last indexes for type 2
      document.getElementById("display").innerHTML+=array_name+"["+(j+1)+"]="
      document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br/>"
    } else { // insert last indexes for type 3
      document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br/>"
    }
  }
}

index_value=new Array()
count= 0
last=0

function make_array2(){
  if(!ns){document.f1.cpy.disabled=false}
  for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
    if(document.f1.r1[r].checked==true){
      chkrad=r
    }
  }
  if(chkrad!=last){ // prevent additional index when only changing array style
    count--
  }

  if(document.f1.t4.value.length>0){
    index_value[count]=document.f1.t3.value+ext}
  else {
    index_value[count]=document.f1.t3.value
  }

  for(i=0;i<count;i++){
    if(option==0){
      document.getElementById("display").innerHTML+="\""+index_value[i]+"\", "
    } else {
      if(option==2){
        document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br/>"
      } else {
        document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br/>"
      }
    }
  }

  if(option==0){
    document.getElementById("display").innerHTML+="\""+index_value[i]+"\")"
  } else {
    if(option==2){
      document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br/>"
    } else {
      document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br/>"
    }
  }
  count++
  document.f1.t3.select()
  last=chkrad
}

function oreset(){
  count=0
  document.f1.t3.value=""
  document.getElementById("display").innerHTML=""
  document.f1.t3.select()
}

function chk(){
  if(document.f1.r2[0].checked==true){
    document.f1.t2.disabled=false
    document.getElementById("sp").disabled=false
    document.f1.t2.style.backgroundColor="#FFFFFF"
    document.f1.b1.disabled=false
    document.f1.b2.disabled=true
    document.f1.b3.disabled=true
    document.f1.t3a.disabled=false
    document.f1.t3a.style.backgroundColor="#FFFFFF"
  } else {
    document.f1.t2.disabled=true
    document.getElementById("sp").disabled=true
    document.f1.t2.style.backgroundColor="#c0c0c0"
    document.f1.b1.disabled=true
    document.f1.b2.disabled=false
    document.f1.b3.disabled=false
    document.f1.t3.select()
    document.f1.t3a.disabled=true
    document.f1.t3a.style.backgroundColor="#c0c0c0"
  }
}

function Copy(id){
  if(ns){
    alert("Sorry, Netscape does not recongise this function")
    document.f1.cpy.disabled=true
    return
  }
  copyit=id
  textRange = document.body.createTextRange();
  textRange.moveToElementText(copyit);
  textRange.execCommand("Copy");
  alert("Copying Complete.\n\nPlease Paste into your SCRIPT")
}

ns=document.getElementById&&!document.all

function getKey(e) {
  pressed_key=(!ns)?event.keyCode:e.which
  if( pressed_key==13){
    init()
  }
}
document.onkeypress = getKey;

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#display {
  position: relative;
  left: 10px;
  width: 450px;
  border: 1px solid black;
  padding: 10px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="arrayCreator.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="f1">

<table border="0">
  <tr>
    <td>Array Name:</td>
    <td colspan="6">
      <input type="text" name="t1" value="myArray">
    </td>
  </tr><tr>
    <td>
      <span id="sp">Indexed Array Length:</span>
    </td>
    <td colspan="6">
      <input type="text" name="t2" value="5" size="3" maxlength="3">
    </td>
  </tr><tr>
    <td>Index Value:</td>
    <td colspan="6">
      <input type="text" name="t3" value="image" size="10">
      <input type="text" name="t3a" value="_tn" size="10"> Ext
      <input type="text" name="t4" value=".jpg" size="4" maxlength="4">
    </td>
  </tr><tr>
    <td>Index Style:</td>
    <td align="right">1
      <input type="radio" name="r1" value="0" checked onclick="init()">
    </td>
    <td> </td>
    <td align="right">2
      <input type="radio" name="r1" value="1" onclick="init()">
    </td>
    <td> </td>
    <td align="right">3
      <input type="radio" name="r1" value="2" onclick="init()">
    </td>
    <td width="80"> </td>
  </tr><tr>
    <td>Add Numerical Values:</td>
    <td align="right">Yes
      <input type="radio" name="r2" value="0" checked onclick="chk()">
    </td>
    <td align="center"> </td>
    <td align="right">No
      <input type="radio" name="r2" value="1" onclick="chk()">
    </td>
    <td> </td>
    <td colspan="2"> </td>
  </tr><tr align="center">
    <td>
      <input type="button" name="b1" value="Numerical Enter" onclick="init()">
    </td>
    <td colspan="6">
      <input type="button" name="cpy" value="Copy Array" onclick="Copy(display)" disabled>
      <input type="button" name="b2" value="Manual Enter" onclick="init()" disabled>
      <input type="button" name="b3" value="Restart" onclick="oreset()" disabled>
    </td>
  </tr>
</table>

</form>

<div id="display"></div>

Leave a Response

(2 comments)

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Jan 31, 2008

i set up the script as per source code, the script displays correctly, but input box does not work.

Vic Jan 28, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details