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