How can I catch an `on change` event in JS once one of many elements change?

So I have several input fields that trigger a function once they change their value. Is there any way I can re-write and shorten this code? I keep repeating myself..

# .js

let months_input = $('#id_months')
let salary_input = $('#id_start_salary')
let monthly_raise_input = $('#id_monthly_raise')

months_input.on('change', function () {
  run_calculation(months_input.val(), salary_input.val(), monthly_raise_input.val())
})

salary_input.on('change', function () {
  run_calculation(months_input.val(), salary_input.val(), monthly_raise_input.val())
})

monthly_raise_input.on('change', function () {
  run_calculation(months_input.val(), salary_input.val(), monthly_raise_input.val())
})

Answer

There’s multiple ways you can do what you’re trying to accomplish and reduce duplication.

You could wrap your inputs in some container element and allow event bubbling to handle this for you.

That might look like this

document.getElementById('foo').addEventListener('change', e => {
  console.log('input changed');
});

<div id="foo">
  <input id="one" />
  <input id="two" />
  <input id="three" />
</div>