2017-08-01 26 views
1

驗收標準:輸入一個名稱並將其人員的擴展返回到onClick或按「返回」時。從用戶輸入中獲取JS對象數據

我在尋找如何使這項工作的建議。

UI

<html> 
    <head> 
     <title>SearchFunction</title> 
    </head> 
    <body> 
     <script type="text/javascript"> 

      var extensionList = { 

       Abby: '8845', 
       David: '8871', 
       Jim: '8890', 
       Lewis: '8804', 
      }; 

      var returnLookUp = function(){ 
       var getInfo = document.getElementById("thisSearch"); 
       var SearchInfo = thisSearch.value; 
       /*......?*/ 
      } 

     </script> 
     <form> 
      <input id="thisSearch" type="text" placeholder="enter name"> 
      <button onClick = "returnLookUp();">Find</button> 
      <input id="output" name="output" type="text" size="30"> 
      <br><br> 
     </form> 

    </body> 
</html> 
+0

'''的返回extensionList [SearchInfo]''' – Wainage

+0

如果我的名字 '大衛' 型我想頁面返回他的分機,8871.我可以得到 通過使用console.log(extensionList.Jim)從extensionList對象獲取信息,但我無法執行任何類似console.log(extensionList.SearchInfo)的操作。 –

+0

重新閱讀我的代碼。不'''extensionList.SearchInfo'''但是'''extensionList [SearchInfo]'''。如果'''searchInfo ='Jim''''它將等於'''extensionList [「Jim」]'''這與'''extentsionList.Jim'' – Wainage

回答

0

有被定義沒有明確的按鈕式。所以默認情況下它將是按鈕type ="submit"。在這種情況下,它會嘗試提交表單。按鈕type="button"可以使用或防止默認行爲,preventDefault()可以使用

extensionList[thisSearch.value]被用於獲取來自對象的鍵的值,extensionList是對象,thisSearch.value將其輸入是相同的關鍵對象

var extensionList = { 
 

 
    Abby: '8845', 
 
    David: '8871', 
 
    Jim: '8890', 
 
    Lewis: '8804', 
 
}; 
 

 
var returnLookUp = function(e) { 
 
    e.preventDefault(); 
 
    var getInfo = document.getElementById("thisSearch"); 
 
    document.getElementById("output").value = extensionList[thisSearch.value]; 
 

 
}
<form> 
 
    <input id="thisSearch" type="text" placeholder="enter name"> 
 
    <button onClick="returnLookUp(event);">Find</button> 
 
    <input id="output" name="output" type="text" size="30"> 
 
    <br><br> 
 
</form>