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

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())
})

CodePudding user response：

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>

CodePudding user response：

var myInputs = document.getElementsByClassName('myInputs')

for(let i = 0; i < myInputs.length; i  ){
  myInputs[i].addEventListener('change', function () {
   run_calculation(months_input.val(), salary_input.val(), monthly_raise_input.val())
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = 'text' class='myInputs'>
<input type = 'text' class='myInputs'>
<input type = 'text' class='myInputs'>

CodePudding user response：

You can use a class selector instead of an id and then use the "this" keyword with it to bind a function to the onchange

$(".class").on( "click", function() {
  run_calculation((this).val())
})

CodePudding user response：

You can give those inputs the same class name and use "for loop" .

or you can just do this:

document.getElementsByClassName("class").addEventListener("change", () =>{ })