Best way to trigger jquery with range input

Question

I have a problem with my jquery...The function works well with other elements, but not with the range input. I want to calculate a value and I need to access other values for that

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

And here is the 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>

The script is working well for the select input, but not for the other triggers... Please, mind my poor coding, I appreciate any advice and notice it for future. Thanks! Edit: and the piece of code

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

receive values from db which match with option values, but sometimes is working, sometimes not...even with multiple refreshes...

Answer 1

You can do:

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

Here's the code. I added some debug code:

    $(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

Use oninput instead of onchange.