How to assign a javascript variable to input text field?

Question

I've a variable called "numbers" in javascript and this variables holds 10 numbers from 0 to 9 as shown below.

var numbers = "0123456789";

Now what I want to be able to do is assigning each of these numbers to an input text field using document.getElementByID("a") = "";, for example:

<input type="text" id="a" value="" />
<input type="text" id="b" value="" />
<input type="text" id="c" value="" />
<input type="text" id="d" value="" />
<input type="text" id="e" value="" />
<input type="text" id="f" value="" />
<input type="text" id="g" value="" />
<input type="text" id="h" value="" />
<input type="text" id="i" value="" />
<input type="text" id="j" value="" />

Currently the following text fields above holding no values, but I want to be able to assign each of the numbers in variable "numbers" to each of the text fields above, so it would looks like this when user clicks on a button called click me.

<input type="text" id="a" value="0" />
<input type="text" id="b" value="1" />
<input type="text" id="c" value="2" />
<input type="text" id="d" value="3" />
<input type="text" id="e" value="4" />
<input type="text" id="f" value="5" />
<input type="text" id="g" value="6" />
<input type="text" id="h" value="7" />
<input type="text" id="i" value="8" />
<input type="text" id="j" value="9" />

Also is there any way to leave a text field empty if a particular number is = 0

Thanks in advance :)

You can get one number of the String using numbers[2] (to get the third character which is two), so something like if(numbers[2] != 0) document.getElementById('c').value = numbers[2] you might want to play with. — pimvdb
– pimvdb, Commented May 13, 2011 at 15:14

mellamokb · Accepted Answer · 2011-05-13 15:15:05Z

8

var numbers = "0123456789";
var ids = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];

for (var i = 0; i < ids.length; i++)
{
    var el = document.getElementById(ids[i]);
    var num = numbers[i];

    if (num == "0")
        el.value = "";
    else
        el.value = num;
}

Working sample: http://jsfiddle.net/LrJ5S/.

answered May 13, 2011 at 15:15

mellamokb

56.8k12 gold badges111 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mylopeda Over a year ago

This code depends on numbers and ids having the same length. You should get the number with numbers[i % ids.length]

mellamokb Over a year ago

@esrange: I see no indication in OP's post that there will be more elements than numbers... why overcomplicate the solution with assumed requirements?

ZAD Over a year ago

This worked perfectly for what I require, but will also check out other solutions! Thank you so muuuuuuuuuuuuuuuuuuuuch!

ZAD Over a year ago

Hi when I go to the link you've given it works but when I save it on my PC the input fields don't work... any idea why this is happening? Thanks

mellamokb Over a year ago

@Farzad: It looks like it was setting it up dependent on library MooTools. Try this version, fiddle.jshell.net/LrJ5S/3/show, do view-source, and copy that source to your local PC. It should work.

user657496 · Accepted Answer · 2011-05-13 15:21:23Z

2

In addition to mellamokb, another way of accomplishing the same:

var numbers = "abc0123abc0123";
var inputs = document.getElementsByTagName('input');
var i = 0;
for(var s = 0; s < inputs.length; s++) {
    inputs[s].value = numbers.charAt(i)!=0?numbers.charAt(i):'';
    i++;
}

JSFiddle

answered May 13, 2011 at 15:21

user657496

2 Comments

ZAD Over a year ago

Thank you guys for all of your useful answers! WOW! :))

ZAD Over a year ago

Hi and thanks for your help! Really appreciate your help! Can you please explain me the "for() {} statement"... especially this line of code "inputs[s].value = numbers.charAt(i)!=0?numbers.charAt(i):''; i++;" within the "for statement"... THANKS :)

epascarello · Accepted Answer · 2011-05-13 15:25:05Z

1

Basic example with no checks on data size of inputs and string:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title></title>
  </head>
  <body>
    <div id="myInputs">
      <input type="text" id="a" value="" />
      <input type="text" id="b" value="" />
      <input type="text" id="c" value="" />
      <input type="text" id="d" value="" />
      <input type="text" id="e" value="" />
      <input type="text" id="f" value="" />
      <input type="text" id="g" value="" />
      <input type="text" id="h" value="" />
      <input type="text" id="i" value="" />
      <input type="text" id="j" value="" />      
    </div>
    <button id="run">Run</button>

    <script type="text/javascript">
        function putNumbers(){
           var numbers = "0123456789";
           var inputs = document.getElementById("myInputs").getElementsByTagName("input");
           for(var i=0;i<inputs.length;i++){
             var val = numbers.charAt(i);
             inputs[i].value = val==="0"?"":val;
           }  

        }

        document.getElementById("run").onclick = putNumbers;
    </script>


  </body>
</html>

working Example

edited May 13, 2011 at 15:25

answered May 13, 2011 at 15:19

epascarello

208k20 gold badges206 silver badges246 bronze badges

3 Comments

ZAD Over a year ago

Hi and thanks for your help! Really appreciate your help! :) Can you please explain me the "for() {} statement"... PLEASE, I'm interested to learn rather than copy and paste! Thanks in advance :)

ZAD Over a year ago

Especially this line of code within the "for() {} statement" -> "inputs[i].value = val==="0"?"":val;"... Thanks :)

epascarello Over a year ago

Docs for ternary operator | charAt | getElementsByTagName

Collectives™ on Stack Overflow

How to assign a javascript variable to input text field?

3 Answers 3

5 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related