Strange behavior on mousedrag, javascript
So, I am using knob.js to create two watch faces, one inside the other. The Outer screen represents the book's cumulative rating, i.e. Average of all ratings. This outer dial has data-readOnly="true"
, and this meaning is displayed in the common center of these dials. The inner dial is for me (the user) to submit my rating for this book. This way the internal value of the set can be changed by me (the user).
<div class="demo_sub_outer">
<input class="knob" data-thickness=".1" data-width="150" data-height="150" data-angleOffset=0 data-displayInput="true" data-angleArc=360 data-fgColor="#209652" data-bgColor="#eee" data-inputColor="" data-readOnly="true" value="{{ u_list.cum_attr_ratings.sexy }}">
</div>
<div class="demo_sub" id="demo_sub_1">
<input class="knob" id="sexy" data-thickness="0.5" data-width="130" data-height="130" data-angleOffset=0 data-displayInput="false" data-angleArc=360 data-fgColor="#b8dcc7" data-bgColor="#e5e5e5" value="{{ u_list.attr_ratings.sexy }}" Title="Cumulative wealthiness" >
</div>
The way I want it to work is when I change the value of the inner set (i.e. when I rate a book or change my rating for a book), the value of the outer set (cumulative rating) needs to be updated accordingly.
This is how I tried to do it ... jsFiddle
Now this works fine if I change the value of the inner set by clicking somewhere on the watch face, but if I change this value by dragging the mouse ... the results are unexpected. What could be causing this strange behavior.
EDIT: In the demo on jsFiddle, I assumed that 3 other users rated this book 80/100 ...
source to share
From what I understand, your problem is because you are using the same callback for both buttons.
$(function($) {
var prev_ratings = [80, 80, 80]
$('.outer-knob').knob();
$(".inner-knob").knob({
var new_ratings = prev_ratings;
new_ratings.push(+$('.inner-knob').val());
var sum = new_ratings.reduce(function(acc, v) { return acc + v }, 0)
$('.outer-knob').val(sum / new_ratings.length);
// code with some output is available on jsfiddle below
},
});
});
I have updated your fiddle with the following points:
- different initialization of buttons
- previous ratings are now in an array for easier testing
- simplify the calculation of new ratings
I used the method reduce
on array to calculate the actual rating, you can find some documentation on mdn if you are not familiar with it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array / Reduce
You will still have to figure out how to submit the new rating to your server.
source to share