複数の関数onchangeを呼び出そうとしています

Question

複数のCalcが実行される入力に依存するExcelスプレッドシートを変換しようとしています。従属変数は入力の合計を示します。しかし、私はそれらの火災といくつかの結果を持っている問題を抱えているそれはすべてのこれらの機能を入力にプラグインしようとすると紛らわしいスーパーです。どんな助けでも大歓迎です。

HTML

<input class="" id="avg-pumping-distance" type="number" value="30000"/> 
<br/> 


<h3 style="margin: 50px 0 0px;">Output</h3> 
<input style="margin: 0px 0 0px;" class="" id="num1" type="number" value="0"> 
<br/> 
<input style="margin: 20px 0 0px;" class="" id="num2" type="number" value="0"> 
<br/> 
<input style="margin: 20px 0 0px;" class="" id="num3" type="number" value="0"> 

はJavaScript

var ReserveFloatingPipe = function() { 
    var val = 100 
    var val2 = 4400 
    var val3 = 100 
    var val4 = (val2 - val3) * val; 
    var val5 = val * val4; 
    var total = val5/1000; 
    $('#num1').val(total); 
    return total; 
}; 

ReserveFloatingPipe(); 
// console.log(ReserveFloatingPipe()); 



var ReserveSubPipe = function() { 
    var val = 100 
    var val2 = 5400 
    var val3 = 100 
    var val4 = (val2 - val3) * val; 
    var val5 = val * val4; 
    var total = val5/1000; 
    $('#num2').val(total); 
    return total; 
}; 

ReserveSubPipe(); 

var ReserveShorePipe = function() { 
    var val = 562 
    var val2 = 652 
    var val3 = 8500 
    var val4 = (val2 - val3) * val; 
    var total = val4/100; 
    $('#num3').val(total); 
    return total; 
}; 

ReserveShorePipe(); 
// console.log(ReserveShorePipe()); 

document.getElementById("avg-pumping-distance").onchange = (function() { 
     ReserveFloatingPipe(); 
     ReserveSubPipe(); 
     ReserveShorePipe(); 
}); 

Answer 1

あなたの変更機能上の要素が存在する前に、あなたの "平均-圧送距離" 入力要素にバインドされています。ドキュメント準備機能を使用して、関数を要素にバインドする必要があります。

$(function(){ 
     document.getElementById("avg-pumping-distance").onchange = (function() { 
      ReserveFloatingPipe(); 
      ReserveSubPipe(); 
      ReserveShorePipe(); 
     }); 
    }); 

または

$(function(){ 
     $("#avg-pumping-distance").on('change',function(){ 
      ReserveFloatingPipe(); 
      ReserveSubPipe(); 
      ReserveShorePipe(); 
     }); 
    }); 

または

$(document).ready(function() { 
     document.getElementById("avg-pumping-distance").onchange = (function() { 
      ReserveFloatingPipe(); 
      ReserveSubPipe(); 
      ReserveShorePipe(); 
     }); 
    }); 

または

$(document).ready(function() { 
     $("#avg-pumping-distance").on('change',function(){ 
      ReserveFloatingPipe(); 
      ReserveSubPipe(); 
      ReserveShorePipe(); 
     }); 
    });