Javascript button click on slider change event

Question

I have a below javascript function which updates the display values when I move the slider. However, now I am planning to update the values only on the button click. This is the javascript function.

.on("slider:ready slider:changed", function (event, data) {
            var $output =$(this).nextAll(".output:first");
            $output.html(data.value.toFixed(2));
            masterData[$output.attr("id").replace(/output/,"")] = data.value;
            $("#kwBody > tr").each(function() {
               var $cells = $(this).children("td");

               var found=false,count=0,currentCell;
               for (var i=0;i<masterData.length;i++) {
                 currentCell=$cells.eq(i+1);
                 found = parseInt(currentCell.text(),10) >=masterData[i];
                 currentCell.toggleClass("found",found); //add or remove class to highlight 
                 count+=found;
               }
               window.console && console.log(masterData,count);
               $(this).toggle(count==masterData.length); // show if all cells >

            });
        });
});

I designed a button as below.

 <button onclick="myFunction()">Display!</button>

I included the above javascript function inside myfunction(). However, the update is not happening on the button click. A working example can be found here.

EDIT:

  <h2>Keyword Scores</h2>
  <?php

$i = 0;
while (++$i <= $_SESSION['totalcolumns']-1) {
isset($_GET["slider$i"]) ? $rangevalue=$_GET["slider$i"] : $rangevalue="";
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
        <br><?php echo "Keyword" ?>
        <?php echo $i ?>
        <br><input type="text" data-slider="true" id="slider<?php echo $i; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
        <meta http-equiv="refresh">
        <?php } ?>  



<script>

Answer 1

Add an 'id' attribute to the button. Say it is 'myButton'. Now,

1. I'm assuming that the var masterData is global

2. Change the slider listener to

   .on("slider:ready slider:changed", function (event, data) {
       var $output =$(this).nextAll(".output:first");
       $output.html(data.value.toFixed(2));
       masterData[$output.attr("id").replace(/output/,"")] = data.value;   
    });
   

3. Create a click listener for the button

   $("#myButton").click(function (){
          $("#kwBody > tr").each(function() {
             var $cells = $(this).children("td");
             var found=false,count=0,currentCell;
              for (var i=0;i<masterData.length;i++) {
                currentCell=$cells.eq(i+1);
                found = parseInt(currentCell.text(),10) >=masterData[i];
                currentCell.toggleClass("found",found); //add or remove class to highlight 
                count+=found;
           }
          window.console && console.log(masterData,count);
          $(this).toggle(count==masterData.length); // show if all cells >
   
       });
   });
   

4. Simulate button click on each page load.

    $(document).ready(function(){
      $("#myButton").click();
    });
   

I haven't tried it, but hopefully, it works.