Use array value as variable name

Question

I need to use jQuery's keyup function to take the value from input html form elements and display said values in a div elsewhere.

The working code looks as follows:

$('#name').keyup(function() {
    var name = $(this).val();
    $('#name-in-document').html(name);
});

Since I have many identical instances of the above code block, I'd like to use a for loop to loop through an array of values. The catch is the name of the variable in the second line

var name = $(this).val();

would come from the array.

I have tried the following loop, which does not work because (as I understand it) a Javascript variable cannot be named an array value:

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var inputsArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(inputsArray[i]);

    })

};

So I have two questions:

Is it true that I cannot use the array values to create a variable in the for loop?
Is there an alternate way to accomplish the same thing (getting the variable names from the array) that might work?

I am just beginning JavaScript and really appreciate any insight. Thank you!

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

1. It is not true
2. You'll need to make a closure over the variable i or over the value from inputArray[i] and inside the event-bind the keyword this refers to the DOMNode witch triggers the event:

_{Read more absout closures here How do JavaScript closures work?}

var inputsArray = ["phone", "name", "address"],
    i = 0,
    len = inputsArray.length;

for ( ; i < len; i ++ ) {
    makeKeyupBind(inputsArray[i]);
} 

function makeKeyupBind( value ) {
    $("#" + value).on("keyup", function() {
        $("#" + value + "-in-document").html( this.value );
    });
}

score 1 · Answer 2 · answered Nov 22 '12 at 15:57

1

That variable only exists within the scope of the function passed as a callback for the keyup event so I don't really see the need to give it a dynamic name; you could call it absolutely anything at all and not run into conflicts.

answered Nov 22 '12 at 15:57

Anthony Grist

38,173
8
62
76

score 0 · Answer 3 · answered Nov 22 '12 at 15:56

Try this:

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var valuesArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(valuesArray[i]);

    })

score 0 · Answer 4 · answered Nov 22 '12 at 15:57

 var inputsArray = ["phone", "name", "address"]; 
 for (var i = 0; i < inputsArray.length; i++) {
   $("#"+inputsArray[i]).keyup(function() {

   var htmlValue = $(this).val();
   $("#"+inputsArray[i]+"-in-document").html(htmlValue);
})

I think you don't need to name variable from array, do you?

charlietfl · Answer 5 · 2012-11-22T16:06:30.200

You can build a selector straight from the array and skip the loop completely. Use the id of the current input to create the selector for the other element

var inputsArray = ["phone", "name", "address"];

$('#'+ inputsArray.join(',#') ).keyup(){
   $('#'+this.id+"-in-document").html(  $(this).val() );
})

This will create the selector:

$('#phone,#name,#address')

Above assumes that you are trying to find elements :

 $("#phone-in-document").html(val);
   $("#name-in-document").html(val);/* etc*/

score 0 · Accepted Answer · answered Nov 22 '12 at 16:08

For the alternative approach, I would recommend giving #name (and his friends) a class name, e.g.

<input class="js-key-up" id="name" />

Then you can do away with the array and the for loop altogether. Also, adding new HTML elements would not require adding items to the array.

HTML

<input class="js-key-up" id="phone">
<input class="js-key-up" id="name">
<input class="js-key-up" id="address">

<p id="phone-in-document"></p>
<p id="name-in-document"></p>
<p id="address-in-document"></p>

JavaScript

$('.js-key-up').keyup(function (e) {
    var id = $(this).attr('id');
    $('#' + id + '-in-document').html($(this).val());
});

I've created a jsfiddle with the code in.

score 0 · Answer 7 · answered Nov 22 '12 at 16:20

@Wes Cossick: this line inside of the loop is wrong:

var valuesArray[i] = $(this).val();

if you want to do it that way declare the array before the loop. that is problem of OP

@diana: if i understand you correct, you want to add a dynamic keyup handler to every item in the array? if it is that way, that code should do it (dont reassign items in the array!) the trick is to create a closure (code is untested).

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

  (function(item) {
    $("#"+item).keyup(function() {
      $("#"+item+"-in-document").html($(this).val());
    });
  })(inputsArray[i]);

};

if you are using jQuery (and it seems so ;-), take a look at the each-function in jQuery: http://api.jquery.com/jQuery.each/

that should be a lot easier for you ;-)

Use array value as variable name

7 Answers7