範囲入力でjqueryをトリガする最善の方法

Question

私のjqueryに問題があります...この関数は他の要素ではうまく動作しますが、範囲入力ではうまく動作しません。私は、値を計算したいと私はその

<input type="range" name="range" id="range" min="0" max="<?php echo $max_range; ?>" oninput="calc_happy()"> 
<input type="number" name="range" id="ranged" value=""oninput="calc_happy()"> 
<select name="work_value" id="work_value" onchange="calc_happy()"> 
    <option value="-1.0">Low work</option> 
    <option value="-1.2">Easy work</option> 
    <option value="-1.4">Normal work</option> 
    <option value="-1.6">Hard work</option> 
</select> 

そして、ここのために他の値にアクセスする必要があるのJsです：スクリプトは、選択入力のためではなく、他のためによく働いている

<script> 
function calc_happy(){ 
    var selected = $('#work_value').val(); 
    var ranged = $('#range').val(); 
    var happy = Math.round(selected*ranged); 
    var nhappy = <?php echo $happy-$wood_minus;?>+happy;  

    $('#w_stats td').eq(7).html(Math.abs(happy)); 
    $('#w_stats td').eq(5).html(selected); 
    //calcul new happy 
    $('p4').html(nhappy); 
    $('p2').html(happy); 

    if(nhappy <= 1){ 
     $('#img').attr("src","../design/images/stats/sad.bmp"); 
    } 
} 
</script> 
<script> 
    window.onload = function() { 
     $('#work_value').val('<?php echo $wood_w; ?>'); 
     $('#range').val('<?php echo $wood_minus/$wood_w; ?>'); 
     $('#ranged').val('<?php echo $wood_minus/$wood_w; ?>'); 
    } 
</script> 
<script> 
    function putvalue(){ 
     $('#ranged').val($('#range').val()); 
    } 
    function putvalue2(){ 
     $('#range').val($('#ranged').val()); 
    } 

</script> 

私の貧弱なコーディングを気にして、私は助言に感謝し、将来気づくでしょう。ありがとう！ 編集：とコード

window.onload = function() { 
     $('#work_value').val('<?php echo $wood_w; ?>'); 
} 

の作品は、あなたが行うことができます

Answer 1

...オプションの値と一致DBから値を受け取りますが、時には複数のリフレッシュと...時々、ない取り組んでいます。

$("#range, #ranged, #work_value").on("change keyup input", calc_happy); 

ここにコードがあります。

$(document).ready(function() { 
 
     $('#work_value').val('-1.4'); 
 
     $('#range').val('5'); 
 
     $('#ranged').val('7'); 
 

 
     $("#range, #ranged, #work_value").on("change keyup input", calc_happy); 
 
    }) 
 

 
    function calc_happy(){ 
 

 
     var selected = $('#work_value').val(); 
 
     var ranged = $('#range').val(); 
 
     var happy = Math.round(selected*ranged); 
 
     var nhappy = 12+happy;  
 
     
 
     var $result = $("#result"); 
 
     var $newDiv = $("<div />"); 
 
     $newDiv.text("selected: " + selected + ", ranged: " + ranged + ", happy: " + happy); 
 
     $result.prepend($newDiv); 
 

 
     $('#w_stats td').eq(7).html(Math.abs(happy)); 
 
     $('#w_stats td').eq(5).html(selected); 
 
     //calcul new happy 
 
     $('p4').html(nhappy); 
 
     $('p2').html(happy); 
 

 
     if(nhappy <= 1){ 
 
      $('#img').attr("src","../design/images/stats/sad.bmp"); 
 
     } 
 
    } 
 

 
    function putvalue(){ 
 
     $('#ranged').val($('#range').val()); 
 
    } 
 
    function putvalue2(){ 
 
     $('#range').val($('#ranged').val()); 
 
    }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <input type="range" name="range" id="range" min="0" max="15" /> 
 
    <input type="number" name="range" id="ranged" value="" /> 
 
    <select name="work_value" id="work_value"> 
 
     <option value="-1.0">Low work</option> 
 
     <option value="-1.2">Easy work</option> 
 
     <option value="-1.4">Normal work</option> 
 
     <option value="-1.6">Hard work</option> 
 
    </select> 
 
    
 
    <div id="result"> 
 
    
 
    </div>

Answer 2

利用oninput代わりのonchange：私はいくつかのデバッグコードを追加しました。