Databases
StackOverflow2013
Postsdbo
POjQuery - Unknown issue calculating average from sliders value
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - Unknown issue calculating average from sliders value
    text
    copied!<p>I got six jQuery UI sliders in a Wordpress metabox, I get they're values and output the average to a text input field (#pm_overall_score), this is the JS that handles this: </p> <pre><code>var sum = 0 ; var nums = 0; $('.rwmb-slider').bind({ slidechange : function(event,ui) { sum = 0; nums = 0; $('.rwmb-slider').each(function(){ var value = $( this ).slider( "option", "value" ); if(value != 0 ) { sum += value ; nums++; } }); var avg = sum / nums ; $('#pm_overall_score').val(Math.floor(avg)); console.log(avg); } }).slider(); </code></pre> <p>Works fine except that when I save the values, on page reload the text input displays huge numbers and I can't understand why this is happening nor the math behind it. </p> <p>Ex:<br> <strong>First Slider > Value 5,</strong><br> <strong>Second Slider > Value 15</strong> </p> <p>Saves the correct average <strong>(10)</strong> but on the input field shows <strong>257</strong> on page reload. Now if I move the third slider to <strong>10</strong>, the number becomes <strong>17170</strong> (??). I need to move back all the sliders to 0 to make it work again. I'm not a jQuery expert though, any idea about why this is happening or any alternative on average calculation?</p> <p>Thanks</p> <p>EDIT: I also post the code that handles the sliders if it's helpful:</p> <pre><code>jQuery( document ).ready( function( $ ) { var id = null , el = null , input = null , label = null , format = null , value = null , update = null ; $( '.rwmb-slider' ).each( function( i, val ) { id = $( val ).attr( 'id' ); el = $( '#' + id ); input = $( '[name=' + id + ']' ); label = $( '[for=' + id + ']' ); format = $( el ).attr( 'rel' ); $( label ).append( ': &lt;span id="' + id + '-label"&gt;&lt;/span&gt;' ); update = $( '#' + id + '-label' ); if ( !$( input ).val() || 'undefined' === $( input ).val() || null === typeof $( input ).val() ) { $( input ).val( $( el ).slider( "values", 0 ) ); $( update ).text( "0" ); } else { value = $( input ).val(); $( update ).text( value ); } if ( 0 &lt; format.length ) $( update ).append( ' ' + format ); el.slider( { value: value, slide: function( event, ui ) { $( input ).val( ui.value ); $( update ).text( ui.value + ' ' + format ); } } ); } ); } ); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload