2017-08-01 11 views
1

受け入れ基準:名前を入力し、そのユーザーの拡張子をUI 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. I取得することができます console.log(extensionList.Jim)を使用してextensionListオブジェクトからの情報を取得できましたが、console.log(extensionList.SearchInfo)のようなことはできませんでした。 –

+0

私のコードを読んでください。 '' '' extensionList.SearchInfo'''ではなく '' 'extensionList [SearchInfo]' ''です。 '' 'searchInfo = 'Jim'''の場合、' '' extentsionList.Jim''と同じ '' '' extensionList ["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>

関連する問題