Enter variable name in textbox and get corresponding value

Question

I have created 3 variables a,b,c. I have assigned values to a and b and have also made a textbox. What I want to do is enter the name of a the variable in the textbox and click the button, then the textbox should should display the value assigned to that variable. It maybe very simple but I do not know what I did wrong.

Here is the FIDDLE

<html>
    <head>
        <script>
            function display(){
                var a = 2;
                var b = 3;
                var c = document.getElementById("b1").value;       
                document.getElementById("demo").innerHTML=c;
            }
        </script>
    </head>
    <body>

        <input type="text" id="b1">
        <button type="button" onclick="display()">Display</button>
        <p id="demo">Update Value.</p>

    </body>
</html>

Example: If i enter a and click the button ..then it should display 2 — rohan_vg
– rohan_vg, Commented Dec 27, 2012 at 11:51
Mmm no it shouldn't, not with that code, it should display : a, you need to have a switch statement or something to say that you want to replace the value of the field with the value of one of your variables — wakooka
– wakooka, Commented Dec 27, 2012 at 11:52

Cerbrus · Accepted Answer · 2012-12-27 12:00:14Z

1

Your easiest choice would be to assign your variables to a object, like this:

var vars;

function display() {
    var value = document.getElementById("b1").value;
    vars = {
        a: 2,
        b: 3,
        c: value
    }
    if (vars.hasOwnProperty(value)) { // If the entered value is a variable name
        document.getElementById("demo").innerHTML = vars[value]; // Display the variable
    } else { // Otherwise
        document.getElementById("demo").innerHTML = value; // display the value
    }
}

Working example

The if/else can be replaced with this, to make it a little shorter:

document.getElementById("demo").innerHTML = vars.hasOwnProperty(value) // If
                                                ? vars[value]          // Then
                                                : vars.c;              // Else

edited Dec 27, 2012 at 12:00

answered Dec 27, 2012 at 11:54

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

Comments

Cerbrus · Accepted Answer · 2012-12-27 11:58:43Z

0

Try this way:

<html>
    <head>
        <script>
            function display(){
                var a = 2;
                var b = 3;
                var c = document.getElementById("b1").value;
                if(c==a){
                    document.getElementById("demo").innerHTML='a';
                }
                if(c==b){
                    document.getElementById("demo").innerHTML='b';
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="b1">
        <button type="button" onclick="display()">Display</button>
        <p id="demo">Update value.</p>
    </body>
</html>

DEMO

edited Dec 27, 2012 at 11:58

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

answered Dec 27, 2012 at 11:55

Sibu

4,6272 gold badges30 silver badges38 bronze badges

1 Comment

Cerbrus Over a year ago

While this works, it's not very flexible. When a variable is added, you'd have to add a if statement also. Also, use if/else's, or a switch / case statement, otherwise all those if statements will be evaluated while only one can ever be true

Tim Joyce · Accepted Answer · 2012-12-27 12:02:46Z

0

What you are looking for is the eval() method (Which, do a quick google search, it is not recommended).

    <script>
        function display(){
            var a = 2;
            var b = 3;
            var c = document.getElementById("b1").value;       
            document.getElementById("demo").innerHTML=(eval(c));
            // if user enters b in the input field, then the html in demo will be 3
            // if user enters a in the input field, then the html in demo will be 2
        }
    </script>

Again, not recommended!

answered Dec 27, 2012 at 12:02

Tim Joyce

4,5276 gold badges36 silver badges50 bronze badges

5 Comments

Cerbrus Over a year ago

There are other ways to do this. Directly using eval on user input is just asking for someone to mess with your code.

Tim Joyce Over a year ago

Downvote is unnecessary since it is the answer that the op was looking for. I made 2 remarks for him to research eval before using it.

Cerbrus Over a year ago

If an OP is looking for something that can be done in more than one way, it's usually a good idea to suggest a tweak in the OP's code if that means removing huge security issues. eval is more often than not reason enough for a downvote, since there are often alternatives. Also, users tend to copy code without doing further research. At the very least, explain why eval is evil, instead of suggesting to use it, and telling a OP to look for a reason he shouldn't.

Tim Joyce Over a year ago

It's a good thing for developers to know the best and worst practices. We all know that eval is bad, except people asking questions like this. Now OP knows too.

Cerbrus Over a year ago

I'll just link to an article explaining why eval's evil, here. Saves users from searching ;-)

Flygenring · Accepted Answer · 2012-12-27 12:17:18Z

If you declare variables directly in you script-element they are created as properties of the window-object and can be accessed as such. Thus just update your script like the following to show the contents of the variables:

<html>
    <head>
        <script>
            var a = 2, b = 3;
            function display() {
                var strVarName = document.getElementById('b1').value;
                if(window.hasOwnProperty(strVarName)) {
                    document.getElementById('demo').innerHTML = window[strVarName];
                } else {
                    document.getElementById('demo').innerHTML = 'Variable ' + strVarName + ' does not exist.'
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="b1">
        <button type="button" onclick="display()">Display</button>
        <p id="demo">Update Value.</p>
    </body>
</html>

This won't work if you declare the variables inside the display function, but this doesn't seem like a thing you would do if this code were to be used in a system to anything beside this one simple function.

Collectives™ on Stack Overflow

Enter variable name in textbox and get corresponding value

4 Answers 4

Comments

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related