title: Javascript - how to add array elements to the textbox field using next ad backward
body: <p>I have list of array elements like {5000,10000,25000,50000,100000} 
  i want those elements should assign to the text field with buttons on click.Like as show in the image</p>
  
  <p><img src="https://i.stack.imgur.com/eO9y6.png" alt="enter image description here"></p>
  
  <p>the units value should change according to the click events.
  Here is the sample code</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  td { width:33%; }
  &lt;/style&gt;
  
  &lt;script&gt;
  
  var counter = 0;
  
  function upDate(){
    counter++;
    if (counter &gt; 7){
      counter = 0;
    }
    var description = new Array(7)
    description[0] = "5000";
    description[1] = "10000";
    description[2] = "25000";
    description[3] = "50000";
    description[4] = "100000";
    description[5] = "250000";
    description[6] = "500000";
    description[7] = "Unlimited";
  
    document.myForm.units.value = description[counter];
  }
  
  var lenght = 0;
  
  function upDateLength(){
    lenght++;
    if (lenght &gt; 2){
      lenght = 0;
    }
    var description = new Array(3)
    description[0] = "30sec";
    description[1] = "60sec";
    description[2] = "unlimited";
  
    document.myForm.length.value = description[lenght];
  }
  
  
  var utype = 0;
  
  function upDateType(){
    utype++;
    if (utype &gt; 2){
      utype = 0;
    }
    var description = new Array(3)
    description[0] = "Feature";
    description[1] = "Background";
    description[2] = "Theme";
  
    document.myForm.utype.value = description[utype];
  }
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form method="post" action="" name="myForm"&gt;
  
  &lt;table width="75%" align="center" border="1"&gt;
  
  &lt;tr&gt;
  &lt;td colspan="3" align="center"&gt;&lt;h2&gt;License Requests&lt;/h2&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;input type="radio" name="type" value="vocal"&gt;&lt;span&gt;Vocal&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="radio" name="type" value="inst"&gt;&lt;span&gt;Instrumental&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="images/up.jpg" width="10px" onclick="upDate()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Units&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="units" value="" &gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;    
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="images/up.jpg" width="10px" onclick="upDateLength()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Length&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="length" value="" &gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;   
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="images/up.jpg" width="10px" onclick="upDateType()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;User Type&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="utype" value="" &gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/td&gt;
  
  
  &lt;/tr&gt;
  
  
  &lt;/table&gt;
  
  
  
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>