如何使 addEventListener 工作/Javascript

Question

I am new in js and can't understand where I made a mistake. I try to make select options switch. This is an HTML code

   <select id="sort">
        <option value="name">name</option>
        <option value="price">price</option>
      </select>

I tried using AddEventListener('change'). but it switches only manually. How to make it work automatically when I choose price or name in select?

let c = document.getElementById('sort');
   c.addEventListener('change', byField);
function byField(value) {
  return (a, b) => a[value] > b[value] ? 1 : -1; 
};
  data.sort(byField('price'));

I will be grateful for any help!

Answer 1

You are doing it manually as data.sort(byField('price')); , make it dynamic by getting the value from event object.

e.target.value will give you the changed value of select HTML element.

let c = document.getElementById("sort");

function byField(value) {
    return (a, b) => (a[value] > b[value] ? 1 : -1);
}
c.addEventListener("change", (e) => {
    data.sort(byField(e.target.value));
});