Question

我创建了3个变量a，b，c。我已经为a和b分配了值，并且还创建了一个文本框。我想要做的是在文本框中输入变量的名称，然后单击按钮，然后文本框应显示分配给该变量的值。它可能很简单，但我不知道我做错了什么。

以下是 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>

Answer 1

您最简单的选择是将变量分配给对象，如下所示：

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

if/else可以替换为此，以缩短它：

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

Answer 2

尝试这种方式：

<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

Answer 3

您正在寻找的是eval（）方法（其中，快速谷歌搜索，不建议使用）。

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

再次，不推荐！

Answer 4

如果直接在您script中声明变量 - 元素它们被创建为window - 对象的属性，并且可以这样访问。因此，只需更新您的脚本，如下所示，以显示变量的内容：

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

如果在显示函数中声明变量，这将不起作用，但如果在系统中将此代码用于此简单函数旁边的任何内容，则这似乎不会发生。

在文本框中输入变量名称并获取相应的值

4 个答案: