Get JS object data from user input

Question

Acceptance Criteria: Enter a name and have the person's extension returned to the UI onClick or when pressing "return".

I am looking for suggestions on how to get this to work.

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

If I type in the name 'David' I would like the page to return his extension, 8871. I can get information from the extensionList object by using console.log(extensionList.Jim) but I have not been able to do anything like console.log(extensionList.SearchInfo). — Lewis Lockhart
– Lewis Lockhart, Commented Aug 1, 2017 at 4:38
Re-read my code. Not extensionList.SearchInfo but extensionList[SearchInfo]. If searchInfo = 'Jim' it will be equivalent to extensionList["Jim"] which is the same as extentsionList.Jim — Wainage
– Wainage, Commented Aug 1, 2017 at 4:42

brk · Accepted Answer · 2017-08-01 04:41:04Z

There is no explicit button type is defined. So by default it will be button type ="submit". in that case it will try to submit the form. button type="button" can be use or to prevent the default behaviour, preventDefault() can be used

extensionList[thisSearch.value] is use to get the value of the key from the object, extensionList is the object, thisSearch.value will be the input which is same as the key of the object

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>

Collectives™ on Stack Overflow

Get JS object data from user input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related