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!

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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 );
    });
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 22, 2012 at 15:57

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

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

Comments

Anthony Grist · Accepted Answer · 2012-11-22 15:57:14Z

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, 2012 at 15:57

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

harriyott · Accepted Answer · 2012-11-22 16:08:27Z

0

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.

answered Nov 22, 2012 at 16:08

harriyott

10.7k10 gold badges69 silver badges104 bronze badges

Comments

Wes Cossick · Accepted Answer · 2012-11-22 15:56:15Z

0

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]);

    })

answered Nov 22, 2012 at 15:56

Wes Cossick

2,9432 gold badges22 silver badges36 bronze badges

Comments

emte · Accepted Answer · 2012-11-22 15:57:17Z

0

 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?

answered Nov 22, 2012 at 15:57

emte

6451 gold badge8 silver badges26 bronze badges

Comments

charlietfl · Accepted Answer · 2012-11-22 16:06:30Z

0

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*/

edited Nov 22, 2012 at 16:06

answered Nov 22, 2012 at 16:00

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

hereandnow78 · Accepted Answer · 2012-11-22 16:20:32Z

@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 ;-)

Collectives™ on Stack Overflow

Use array value as variable name

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related