I'm making this evaluation tool that uses radio buttons to select the grade and show the total result, that is the sum of different factors using jquery. I can make the summary, but I dont know how to subtract the previous value selected when I change the grade.
here is a jsfiddle that shows a simplified version of what I have..
current JQuery
$('input[type=radio]').click(function(){
var x= parseInt($(this).val());
if ($('#weeh:not(:empty)').text()){
var y= parseInt($('#weeh').text());
var z= x+y;
$('#weeh').text(z);
}else{
$('#weeh').text(0);
}
});
The expected behavior is:
For example, If I clicked terrible, it added 4 but if I want to change it to good, it must subtract 4 and add 1 to the result
your help is very appreciated.
Try this code,
$('input[type=radio]').change(function () {
var total = 0;
$("input[type=radio]:checked").each(function () {
var x = parseInt($(this).val());
total += x;
});
$('#weeh').text(total);
});
http://jsfiddle.net/xUrJv/11/
Related
http://live.datatables.net/dalogaci/1/edit
I have an amount of money to be dispersed and am using DataTables to display a list of people and allow entry of an amount next to each person (their share of the disbursement). I want to provide a running total of the amount entered into the table so I can warn when the total to be dispersed has been reached or passed.
Kind regards,
Glyn
You can use the following approach.
In my case, I display the running total in a <div>, rather than an input box, as the value is only for display purposes:
<div id="showsum">Grand Total: $0.00</div>
The end result:
The script for this - which I have tried to explain with comments in the code:
<script type="text/javascript">
// define the table variable here so the doSum()
// function will have access to it, when needed:
var table;
// reads each value from the final column in the table, checks
// if the value is a number (as opposed to blank), and then
// keeps a running total. Ensure we round fractions of pennies
// as needed.
//
// When handling money, use a big number library - see this:
// https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript
//
function doSum() {
//var foop = table.columns(5).nodes().to$();
var sum = 0.0;
// this gets each node (cell) in the final column:
table.columns(5).nodes().to$()[0].forEach(function (item) {
// see if the display value is a number (i.e. not blank):
var amt = parseFloat($('input', item ).val());
if (!isNaN(amt)) {
sum += amt;
}
});
// round and display to 2 decimal places:
sum = (Math.round((sum + Number.EPSILON) * 100) / 100).toFixed(2);
$('#showsum').text("Grand Total: $" + sum);
}
$(document).ready(function() {
table = $('#example').DataTable( {
"columnDefs": [ {
"targets": 5,
"data": function ( row, type, val, meta ) {
// note the use of onchange="doSum()" in the following:
return '<input type="number" min="0" max="99999.99" step=".01" placeholder="0.00" onchange="doSum()">';
}
} ]
} );
} );
</script>
For a change to be added to the grand total, you have to hit "enter", or click outside of the input field, if you type the value in manually.
Because you are dealing with money, the code should really be using a "big number" format to eliminate the risk of inaccuracies in fractions of pennies (due to limitations in floating point arithmetic). For example see here.
Final note: I see this question was down-voted. I think that may have been because you only link to your demo code, instead of showing the relevant parts in the question itself. The link to the demo is useful - but showing code in the question itself is generally a "must-do", I think.
My data call can have lots of small elements (in percentage) that I would like to ignore, I only need the top 5 in my amCharts pie.
Can this be accomplished with amCharts or I should treat the data before?
please see my [jsfiddle][1]
[1]: http://jsfiddle.net/pbarros/xznxbnc7/3/
thanks
You can use the hideLabelsPercent property to set a threshold for the lowest allowed percentage you want a label for. If you want to do this dynamically, you can set this in the init event by finding the 5th largest percents value in the chart's chartData array and use it as your hideLabelsPercent threshold. I've updated your handleInit method to do this:
function handleInit(e) {
if (e.chart.chartData.length > 5) {
//sort the copy of the chartData array from largest to smallest
//if your data is pre-sorted, then you can skip this step
var sortedData = e.chart.chartData.slice().sort(function(lhs, rhs) {
return rhs.percents - lhs.percents;
});
//set the threshold equal to the 5th largest slice's percents value so that the rest are hidden
e.chart.hideLabelsPercent = sortedData[4].percents;
//redraw the chart
e.chart.validateNow();
}
}
Updated fiddle: http://jsfiddle.net/xznxbnc7/9/
Edit since I misread the question
If you only want to show the top five slices from your dataset, you can filter on your backend or use the init method to sort and modify your dataProvider to contain only the top five.
function handleInit(e) {
if (e.chart.chartData.length > 5) {
//sort the copy of the chartData array from largest to smallest
//if your data is pre-sorted, then you can skip this step
var sortedData = e.chart.dataProvider.slice().sort(function(lhs, rhs) {
return rhs[e.chart.valueField] - lhs[e.chart.valueField];
});
//only put in the top 5.
e.chart.dataProvider = sortedData.slice(0, 5);
// redraw the chart
e.chart.validateData();
}
}
Fiddle: http://jsfiddle.net/g3cchyjg/1
I have put together a calculator what calculates a price, depending on user input. It works fine with one input, but now I have to scale it a little with a second user input. But here's the catch: the user might not want to put anything to the field, so it will be empty. And that's the thing that brakes my code. I could duplicate the calculator function and return the values and add those two together in a third function, but it will not work when there's an empty value.
Just for the sake of it, some trivial HTML code:
//When I only calculate with this user input, its easy
<input type="text" id="rocktext"><br>
// But how to consider this and do the same exact calculations like with the
//first one and add those two result together?
<input type="text" id="rocktext2"><br>
The code in the end should look like:
Take first user input, calculate the price(like in code below)
IF(!!) there is a second user input, calculate the price and add it to
the first one
Am I being a moron to try it with JS or just a moron in the firstplace?
Hope to hear from You, guys!
J.
The initial JS code is as follows:
function priceCalc() {
var inputs = document.getElementById("rocktext").value;
var length = inputs.length;
var accept = 6;
var initPrice = 8;
if (inputs<=accept){
// Since the code is much simpler right now i just put the result in HTML as follows:
document.getElementById("rockpricetotal").innerHTML = initPrice + " dollars";
//I can also return the the value calculated here like so:
//retVal = initPrice;
}
else {
var intLength = parseInt(length, 10);
var lengthGap = intLength - accept;
var totals = lengthGap * 0.8 + initPrice;
var prec = totals.toPrecision(3);
// Since the code is much simpler right now i just put the result in HTML as follows:
document.getElementById("rockpricetotal").innerHTML = prec + " dollars";
// Here also the return clause can be possible with the calculation result like so:
//retVal = prec;
}
// And the final return as an alternative to the innerHTML :
// return retVal;
}
Making it scalable, you can add a class to all the inputs which may be in the function (something like calcInput), so you iterate all of them and if the value isn't empty (and if it's a valid number), you put it in the calculation.
Or you can just verify if the second input is empty, if so, calls functionOne, if not, calls functionTwo:
function twoDifferentWays() {
var valueOne = document.querySelector("#rocktext").value;
var valueTwo = document.querySelector("#rocktext2").value;
if (!!valueTwo && !isNaN(valueTwo)) {
callsFunctionOne(valueOne, valueTwo);
} else {
callsFunctionTwo(valueOne, valueTwo);
}
}
I want to show to previous and next word,
and when the current one is 'fuga' one please let the next one will be first one('hoge'), same thing when the current one is first one the prev should be last one from list - 'fuga'
could you help me? please
[http://jsfiddle.net/zeck/L8Snx/][1]
This is probably what you're looking for. Working fiddle: http://jsfiddle.net/L8Snx/37/
HTML
<div>
<strong>Previous:</strong> {{getPrev().name}}
<strong>Current:</strong> {{current.name}}
<strong>Next:</strong> {{getNext().name}}
</div>
JavaScript
$scope.getNext = function() {
var i = $scope.getIndex($scope.current.index, 1);
return $scope.dataSet[i];
};
$scope.getPrev = function() {
var i = $scope.getIndex($scope.current.index, -1);
return $scope.dataSet[i];
};
I have a list of cases in the queue that I need to grab. As you can imagine, it's a bit repetitive and time consuming. I'm new at programming and haven't figured a way to create a script that auto-click/grab these cases. Can someone help?
Code to:
1) Search and Click "Grab"
- will take 4 seconds for the page to refresh
2) Click grab again
3) stop after 50 cases are grabbed
This code doesn't work
window.setTimeout("pushSubmit()",3000);
function pushSubmit()
{document.getElementById('Grab').click();
Assuming your page is not refreshed in the process, you could keep a counter of how many "Grabs" you have done:
var counter = 0;
var maxCount = 50;
function pushSubmit() {
if(counter++ < maxCount) {
document.getElementById('Grab').click();
window.setTimeout(pushSubmit,3000);
}
}
//start the process
pushSubmit();
Here is a jsfiddle example
EDIT:
Or what I would probably prefer, set up the function so it can be used with any number of iterations.
function pushSubmit(max, count) {
count = typeof count !== 'undefined' ? count : 1;
if(count <= max) {
document.getElementById('Grab').click();
window.setTimeout(function() { pushSubmit(max, ++count) },3000);
}
}
//start the process with the max number of iterations it should perform
pushSubmit(50);
Example