How can I set a function to an event listener

Question

I have this function displaySelectedUser, so I want to Set displaySelectedUser as a change event listener for the <select></select> UI element using only the DOM Selector API.

this is the code that I have tried out:

<body>
<div class="select">
      <select class="select-text">
        <option disabled selected>Select User</option>
         <option>user 1</option>
         <option>user 2</option>
      </select>
</div>
<body>
<script>
   const displaySelectedUser = () => {
 //some code...
};
    document.querySelector('select').change = displaySelectedUser;   
  };
</script>

`.onchange = displaySelectedUser;` or `.addEventListener('change', displaySelectedUser);` — Alex Kudryashev, May 06 '19 at 21:00

score 1 · Accepted Answer · answered May 07 '19 at 06:41

1

Try this using the HTML5 Selector API.

 document.querySelector(".select").addEventListener("change", displaySelectedUser)

answered May 07 '19 at 06:41

electrode

473
6
13

score 0 · Answer 2 · answered May 06 '19 at 20:55

You can simply add an onChange event handler on the select element which calls that function directly.

<body>
<div class="select" onChange="displaySelectedUser()">
      <select class="select-text">
        <option disabled selected>Select User</option>
         <option>user 1</option>
         <option>user 2</option>
      </select>
</div>
<body>
<script>
   const displaySelectedUser = () => {
 //some code...
};
</script>

score 0 · Answer 3 · answered May 06 '19 at 21:01

As Tim has mentioned you can simply add onchange instead of change in your code and it woks.

<body>
<div class="select">
      <select class="select-text">
        <option disabled selected>Select User</option>
         <option>user 1</option>
         <option>user 2</option>
      </select>
</div>
<body>
<script>
   const displaySelectedUser = () => {
 //some code...
     alert('calling')
};
      const powerupTheUI = () => {
    document.querySelector('select').onchange = displaySelectedUser;   
  };
  
  powerupTheUI();
</script>

How can I set a function to an event listener

3 Answers3