在文本框中輸入變量名稱並獲得相應的值

我已經創建了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>

來源

2012-12-27 rohan_vg

例如：如果我輸入a並點擊按鈕..那麼它應該顯示2 –

嗯不，它不應該，不應該與該代碼，它應該顯示：a，你需要有一個'switch'語句或什麼要說你想用你的變量之一的值替換該字段的值 – wakooka

你最容易的選擇將您的變量賦值給一個對象，像這樣：

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

來源

2012-12-27 11:54:57 Cerbrus

試試這個方法：

<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

來源

2012-12-27 11:55:13 Sibu

雖然這可行，但它不是很靈活。當添加一個變量時，你還必須添加一個'if'語句。另外，使用'if/else'或switch/case語句，否則所有這些'if'語句都將被評估，而只有一個可以是'true'。 – Cerbrus

你要找的就是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>

再次，不推薦！

來源

2012-12-27 12:02:46

還有其他方法可以做到這一點。直接在用戶輸入中使用'eval'就是要求別人搞亂你的代碼。 – Cerbrus

Downvote是不必要的，因爲它是操作者尋找的答案。在使用它之前，我爲他進行了2次評論。 –

如果一個OP正在尋找可以以多種方式完成的事情，那麼建議在OP代碼中進行調整通常是一個好主意，如果這意味着消除巨大的安全問題。對於downvote而言，'eval'往往不夠理由，因爲通常會有替代品。此外，用戶傾向於複製代碼而無需進一步研究。至少，解釋爲什麼'eval'是邪惡的，而不是暗示使用它，並告訴OP尋找他不應該的原因。 – Cerbrus

如果您直接在您中聲明變量script -element，它們將作爲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>

如果聲明顯示功能中的變量這將無法正常工作，但是這似乎並不像你會做的事如果這個代碼是在一個系統中用於除了這個簡單函數外的任何東西。

來源

2012-12-27 12:03:31 Flygenring

在文本框中輸入變量名稱並獲得相應的值

回答

相關問題