Así que tengo varios campos de entrada que activan una función una vez que cambian su valor. ¿Hay alguna manera de que pueda volver a escribir y acortar este código? me sigo repitiendo..
# .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()) })Hay varias formas de hacer lo que está tratando de lograr y reducir la duplicación.
Puede envolver sus entradas en algún elemento contenedor y permitir que el burbujeo de eventos maneje esto por usted.
Eso podría verse así
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'>Puede usar un selector de clase en lugar de una identificación y luego usar la palabra clave "esto" para vincular una función al cambio
$(".class").on( "click", function() { run_calculation((this).val()) })