CODEWITHSUNDEEP
javascript
JSRB
JSRB

Reputation: 2623

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

Upvotes: 0

Views: 76

Answers (4)

DCR
DCR

Reputation: 15700

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

Upvotes: 1

Steve Walson
Steve Walson

Reputation: 470

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

or you can just do this:

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

Upvotes: 0

Tom
Tom

Reputation: 7740

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>

Upvotes: 2

Sean
Sean

Reputation: 1456

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

Upvotes: 0

Related Questions