Javascript dynamic variable

Question

I have a small function that can change the type of a form input (I use it to change a button to submit). I've found it somewhere and didn't write it myself, it's just a small, handy Little piece of code, like this:

function change_input_type(id,x)
{
    var id;
    var x;

    // Change input type
    document.getElementById(id).type = x;
}

And I call it using onClick:

onClick="change_input_type('myButton','submit');

But I want it to also be able to change the value of an input (another hidden input that I want to change from 0 to 1 in some cases). I know I can create another function, rename it to change_input_value and then change document.getElementById(id).type to document.getElementById(id).value but I want a generic funtion, like this:

function change_input(id,x,y)
{
    var id;
    var x;
    var y;

    // Change input
    document.getElementById(id).x = y;
}

And onClick like this:

onClick="change_input('myButton','type','submit');"
onClick="change_input('myHidden','value','1');"

But when I try that it wont work. I usually work with php and I'm not very skilled with JavaScript... so I wonder what I'm doing wrong here?

Do you have the possibilty in your project to use jQuery. Often it is more easier to set DOM properties/values with this library. Especially if you are new to JS — Martin
– Martin, Commented Feb 13, 2016 at 12:37
@Tushar Beside that it is not overwritten in Chrome and FF, are you sure that it should behave that way? The var statement just binds the name to the scope of the function, like a parameter does. — t.niese
– t.niese, Commented Feb 13, 2016 at 12:44
IMO for such a trivial operation there's little need for a specialized function (especially since that function is also clearly written by someone who doesn't understand Javascript very much; the var declarations are entirely superfluous). Just write document.get... directly as needed when needed. — deceze
– deceze ♦, Commented Feb 13, 2016 at 13:07

Kita · Accepted Answer · 2016-02-13 12:40:02Z

5

Accessing object property via [..] (bracket notation) will let you use variable's value as property name.

document.getElementById(id)[x] = y;

Check MDN Property accessor - bracket notation for more details.

edited Feb 13, 2016 at 12:40

answered Feb 13, 2016 at 12:33

Kita

2,62420 silver badges26 bronze badges

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

Comments

Paolo · Accepted Answer · 2016-02-13 12:40:32Z

3

Just use setAttribute() method to set the value of attribute named x to y

// Change input type
document.getElementById(id).setAttribute(x, y);

http://www.w3schools.com/jsref/met_element_setattribute.asp

edited Feb 13, 2016 at 12:40

answered Feb 13, 2016 at 12:35

Paolo

15.9k28 gold badges73 silver badges95 bronze badges

1 Comment

t.niese Over a year ago

It should be mentioned that setAttribute will not necessarily have a directly noticeable effect. E.g. changing the value attribute if the value property was already changed. Attributes should more be seen as default values then live values (properties). And w3schools is into the best reference they introduce setAttribute with the exactly those attributes where you normally should not use it.

Collectives™ on Stack Overflow

Javascript dynamic variable

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related