We Keep Coding

How can I display the sum of certain columns of a table in javascript?

I do not understand javascript at all, I study as needed and I need help
I need to sum up the values of certain columns of a table, the rows of which are marked with a checkbox
For example: I mark the checkbox in two rows of the table and the sum of 3,4 and 5 columns is summed up and displayed somewhere on the page
Now I managed to find a piece of code that summarizes the value of the checked checkboxes in the form, and displays it on the page
I need help in replacing the part that receives the "value" of the input, with the one that gets the values of the cells in the stob = head of the table and sums them
Here is this code
var
$form = $("#out_form"),
$allCheckboxes = $("input:checkbox", $form),
$sumOut = $("#checked-sum"),
$countOut = $("#checked-count");
$allCheckboxes.change(function() {
var
sum = 0,
count = 0;
$allCheckboxes.each(function(index, el) {
var
$el = $(el),
val;
if ($el.is(":checked")) {
count++;
val = parseFloat($el.val());
if (!isNaN(val)) {
sum += val;
}
}
});
$sumOut.text(sum);
$countOut.text(count);
});
HTML
<form action="" method="post" id="out_form">
<input type="hidden" name="next" value="{{next}}"/>
<button type="submit">Check</button>
<span id="checked-sum">0</span>
<span id="checked-count">0</span>
{%csrf_token%}
<div class="table-view__container">
<table class="table-view__table">
<tbody class="table-view__body">
{% for out in filter.qs %}
<tr>
<td>
<label class="custom_Label">
<input type="checkbox" name="checked" value="{{ out.id }}">
<span class="checkmark"></span>
</label>
</td>
<td>{{out.date|date:"d(D).m.Y"}}</td>
<td>{{out.ts}}</td>
<td>{{out.pl}}</td>
<td>{{out.rem}}</td>
<td>{{out.comment}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</form>
It is necessary to sum these 3 columns:
...
<td>{{out.ts}}</td>
<td>{{out.pl}}</td>
<td>{{out.rem}}</td>
...
UPD:
I managed to display the amount with the checkbox active, but only the first line:
var
$form = $("#out_form"),
$table = $(".table-view"),
$allCheckboxes = $("input:checkbox", $form),
$sumOut = $("#checked-sum"),
$countOut = $("#checked-count");
$allCheckboxes.change(function() {
var
sum = 0,
count = 0;
$allCheckboxes.each(function(index, el) {
var
$el = $(el),
val;
if ($el.is(":checked")) {
count++;
$form.each(function () {
var val1 = parseInt(document.querySelector(".ts", this).innerHTML,10);
var val2 = parseInt(document.querySelector(".pl", this).innerHTML,10);
var val3 = parseInt(document.querySelector(".rem", this).innerHTML,10);
var total = (val1 * 1) + (val2 * 1) + (val3 * 1);
sum += total;
});
if (!isNaN(val)) {
sum += total;
}
}
});
$sumOut.text(sum);
$countOut.text(count);
});

JavaScript can be confusing, its definitely not an easy programming language. Sorry for not using your code, but I think its overcomplicating things.
So mainly what this code does is to trigger a function using event handlers on all checkboxes, that sums or substracts from the result variable depending if they are checked or unchecked and then show the result in a <span> tag.
Some key points
I used document.querySelectorAll('input[type=checkbox]') to get all the checkbox elements.
The following code is to create one event handler for each checkbox element:
boxes.forEach((box) => {
box.addEventListener("change", function() {
The input checkbox element lives inside a <td></td>, so this.closest('td').nextElementSibling is necessary to get the parent tag and then with the help of nextElementSibling we can get the next <td> element of the table which has the value we need to sum or substract.
Snippet
var boxes = document.querySelectorAll('input[type=checkbox]'),
show = document.getElementById('showResult'), result = 0;
boxes.forEach((box) => {
box.addEventListener("change", function() {
var firstElement = this.closest('td').nextElementSibling,
secondElement = firstElement.nextElementSibling,
firstValue = parseInt(firstElement.innerHTML),
secondValue = parseInt(secondElement.innerHTML);
var sum = firstValue + secondValue;
this.checked ? result += sum : result -= sum;
show.innerHTML = result;
});
});
td {
border: 1px solid #dddddd;
text-align: left;
width:50px;
text-align:center;
}
span{
font-size:20px;
}
<table id="table">
<tr>
<td><input type="checkbox" id="box1" /></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" id="box2" /></td>
<td>3</td>
<td>4</td>
</tr>
</table>
<br>
<br>
<span>Result: </span><span id="showResult">0</span>

Dynamically change the color or text based on value with Javascript

Hey guys looking for some assistance with changing the color of text based on value. If the value is zero or negative I want it to be red, and if the value is + I want it to be green. Below is just a little bit of code from the full html but I think these are the key parts. Here is a JSFiddle As you can see the table is dynamic. As you input data into the starting amount it will automatically calculate it for the ending amount. The starting amount adds to the bill amount which produces the total amount number. I am also not sure if the event "onchange" is correct. Thank you for your input and advise in advanced.
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt" onchange="colorChange(this)">0</span></b></p>
<script type="text/Javascript">
var myElement = document.getElementById('totalAmt');
function colorChange() {
if('myElement' > 0) {
totalAmt.style.color = 'green';
} else {
totalAmt.style.color = 'red';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt') ;
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
}
</script>

You can reach the desired result using just one function. Instead of checking the DOM element's innerHTML or textContext to get the amount, just refer to the variables holding it.
var myElement = document.getElementById('totalAmt');
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
myElement.style.color = money + billTotal <= 0 ? 'red' : 'green';
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>

use myElement.innerHTML instead of myElement in the if condition and invoke the changeColor function at last of calc
var myElement = document.getElementById('totalAmt');
function colorChange() {
if (myElement.innerHTML <= 0) {
totalAmt.style.color = 'red';
} else {
totalAmt.style.color = 'green';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
colorChange();
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>

A couple issues with your original code:
1 - you were checking if the string myElement was greater than zero, instead of the innerHTML of the element you selected.
2 - using innerHTML() to change the contents of an element doesn't fire an onchange event. In my code, I call your colorChange function at the end of the calc function, so if you decide to add another field to it (tax or something), it will be called after the total is calculated.
function colorChange() {
var myElement = document.getElementById('totalAmt');
if (myElement.innerHTML > 0) {
totalAmt.style.color = 'green';
} else {
totalAmt.style.color = 'red';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
colorChange()
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>

how to bind sum of string array values to $scope

I am trying to bind the sum of selected checkboxes from a table. I am almost there but I cannot figure out what I am doing wrong. The picture shows 2 selected boxes
you see the result of my code. I am open to suggestions if there is a better way of going about this.
$http.get('/api/Products/').success(function (data, status) { $scope.productList = data; });
$scope.selection = [];
$scope.OrderAmount = []
$scope.myTotal = 0;
$scope.toggleSelection = function toggleSelection(ProductId) {
var idx = $scope.selection.indexOf(ProductId);
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
else {
$scope.selection.push(ProductId);
}
for (var i = 0; i < $scope.selection.length; i++) {
var OrderProductId = $scope.selection[i]
var data = Enumerable.From($scope.productList).Where("x => x.ProductId == '" + OrderProductId + "'").ToArray();
$scope.OrderAmount.push(data[0].ProductPrice)
// $scope.OrderAmount = ["8500", "8500"]
for (var i = 0, len = $scope.OrderAmount.length; i < len; i++) {
$scope.myTotal += $scope.OrderAmount[i][0];
};
};
$scope.$watch('myTotal', function (value) {
$scope.model.OrderAmount = value;
});
};
view
<table class="table">
<th>Product</th>
<th>Price</th>
<tbody>
<tr ng-repeat="model in products">
<td>
<div class="toggle-switch" data-ts-color="blue">
<input id="{{model.ProductId}}" type="checkbox" hidden="hidden" ng-checked="selection.indexOf(model.ProductId) > -1" ng-click="toggleSelection(model.ProductId)">
<label for="{{model.ProductId}}" class="ts-helper"></label>
</div>
</td>
<td>{{model.ProductName}}</td>
<td>{{model.ProductPrice}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input type="text" ng-model="model.OrderAmount" class="form-control fg-input">
</div>
UPDATE to first answer

You are doing the data binding wrongly. The checked status should be bound using ng-model but not ng-checked. You can make this easy by using an attribute (in the example checked) inside model and then loop over products to calculate the sum.
<tr ng-repeat="model in products">
<td>
<div class="toggle-switch" data-ts-color="blue">
<input id="{{model.ProductId}}" type="checkbox" hidden="hidden" ng-model="model.checked" ng-click="toggleSelection()">
<label for="{{model.ProductId}}" class="ts-helper"></label>
</div>
</td>
<td>{{model.ProductName}}</td>
<td>{{model.ProductPrice}}</td>
</tr>
Controller:
$scope.toggleSelection = function() {
var sum = 0;
angular.forEach($scope.products, function(value){
if (value.checked) sum += value.ProductPrice;
});
$scope.model.OrderAmount = sum;
}

Get Sum from each row form-field

I trying to calculate some rows (input fields) but it seams to hard for me :(.
The html code i have looks like this:
<table>
<tr>
<td>
<input name="Field_Price_1" id="Field_Price_1" value="20.55" type="text">
<input name="Field_Amount_1" id="Field_Amount_1" type="text">
<input name="Field_SubTotal_1" id="Field_SubTotal_1" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_2" id="Field_Price_2" value="17.55" type="text">
<input name="Field_Amount_2" id="Field_Amount_2" type="text">
<input name="Field_SubTotal_2" id="Field_SubTotal_2" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_3" id="Field_Price_3" value="94.20" type="text">
<input name="Field_Amount_3" id="Field_Amount_3" type="text">
<input name="Field_SubTotal_3" id="Field_SubTotal_3" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_4" id="Field_Price_4" value="12.10" type="text">
<input name="Field_Amount_4" id="Field_Amount_4" type="text">
<input name="Field_SubTotal_4" id="Field_SubTotal_4" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_5" id="Field_Price_5" value="7.45" type="text">
<input name="Field_Amount_5" id="Field_Amount_5" type="text">
<input name="Field_SubTotal_5" id="Field_SubTotal_5" type="text">
</td>
</tr>
So i would put the sum from all input fields "Field_Price_" in the following span by triggering "keyup" from each Field_Amount_".
<table>
<tr>
<td><span id="PrintSum">0.00</span></td>
</tr>
The following i tried:
var total = 0;
var Price = $('input[id^=Field_Price_]').val();
$.each($(Price), function(){
total += $(this).val();
});
$('#PrintSum').text(total);
So that won't work.
Do any know what is the problem? Thank you very much!

try something like this,Fiddle
var total = 0;
var Price = $('input[id^=Field_Price_]');
$.each($(Price), function(){
total += parseInt($(this).val());
});
$('#PrintSum').text(total);

use this javascript
$(':input[id^="Field_Price_"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="Field_Price_"]');
$inputs.each(function (index)
{
total += parseFloat($(this).val());
});
alert(total);
$('#PrintSum').text(total);
});
jsFiddle

What about this solution:
var $prices = $('input[id^=Field_Price_]'),
$amounts = $('input[id^=Field_Amount_]');
$prices.add($amounts).on('keyup', function() {
var total = 0;
$prices.each(function() {
total += $(this).val() * $(this).next().val() || 0;
});
$('#PrintSum').text(total.toFixed(2));
})
.trigger('keyup');
http://jsfiddle.net/UFSvF/
Here changing the price as well as an amount triggers total price recalculation.

I guess you should be parse the input value to an float.
var total = 0;
var Price = $('input[id^=Field_Price_]').val();
$.each($(Price), function(){
total += parseFloat($(this).val());
});
$('#PrintSum').text(total);

On jsfiddle, an example not using jquery, but you could modify to do testing there
var prices = document.querySelectorAll("[id^=Field_Price]"),
ammounts = document.querySelectorAll("[id^=Field_Amount]"),
subTotals = document.querySelectorAll("[id^=Field_SubTotal]"),
printSum = document.getElementById("PrintSum");
function sumIt() {
var total = 0;
Array.prototype.forEach.call(prices, function (price, index) {
var subTotal = (parseFloat(price.value) || 0) * (parseFloat(ammounts[index].value) || 0);
subTotals[index].value = subTotal.toFixed(2);
total += subTotal;
});
printSum.textContent = total.toFixed(2);
}
Array.prototype.forEach.call(prices, function (input) {
input.addEventListener("keyup", sumIt, false);
});
Array.prototype.forEach.call(ammounts, function (input) {
input.addEventListener("keyup", sumIt, false);
});
sumIt();
Here is a jquery version of above, on jsfiddle
var prices = $("input[id^=Field_Price_]"),
amounts = $("input[id^=Field_Amount_]"),
subTotals = $("input[id^=Field_SubTotal_]"),
printSum = $("#PrintSum");
function sumIt() {
var total = 0;
prices.each(function(index, price) {
var subTotal = (parseFloat(price.value) || 0) * (parseFloat(amounts.eq(index).val()) || 0);
subTotals.eq(index).val(subTotal.toFixed(2));
total += subTotal;
});
printSum.text(total.toFixed(2));
}
prices.on("keyup", sumIt);
amounts.on("keyup", sumIt);
sumIt();
I will modify my pure javascript version soon to show you how your further questioning can be achieved, without the need of including jquery.
It has now been updated so you can see how it works
And a jsperf showing the construction performance of the two

What is wrong with this Javascript? shopping cart

There is something in this javascript or html which is is allowing the checkboxes to be ticked but for not even half a second. (I need the checks to stay there!) I also need the additems function to work
var computer = new Array();
computer[0] = "10001, Nvidia Geforce GTX 690, 1200";
computer[1] = "10002, Raedon HD 7950, 450";
computer[2] = "20001, Ivy Bridge i7 3770, 400";
computer[3] = "20002, Ivy Bridge i7 3770k, 420";
computer[4] = "20003, Sandy Bridge i7 2700k, 340";
computer[5] = "20004, Bulldozer FX-8150, 270";
computer[6] = "30001, Antec eleven-hundred, 120";
computer[7] = "30002, Coolermaster HAF-X, 170";
computer[8] = "30003, Antec three-hundred, 50";
computer[9] = "30004, Corsair 550D, 160";
computer[10] = "40001, INTEL-ASrock fatal1ty Z77 Professional Motherboard, 250";
computer[11] = "40002, INTEL-ASrock Z77 extreme9 Motherboard, 350";
computer[12] = "40003, AMD-ASrock fatal1ty 990FX Professional Motherboard, 240";
computer[13] = "40004, AMD-ASUS Sabertooth 990FX Motherboard, 260";
Check all checkboxes function
function check() {
var leftSide = document.getElementById('table_container_left');
var inputs = leftSide.getElementsByTagName('input');
for (x=0; x<=inputs.length-1; x++) {
if(inputs[x].type == 'text') {
inputs[x].value = 1;
} else {
inputs[x].checked = true;
}
}
}
Uncheck all checkboxes function
function uncheck() {
var leftSide = document.getElementById('table_container_left');
var inputs = leftSide.getElementsByTagName('input');
for (x=0; x<=inputs.length-1; x++) {
if(inputs[x].type == 'text') {
inputs[x].value = 0;
} else {
inputs[x].checked = false;
}
}
}
add checked items to cart
function addItems() {
var leftSide = document.getElementById('table_container_left');
var rightSide = document.getElementById('table_container_right');
var inputs = leftSide.getElementByTagName('input');
var totalPrice = 0;
var basketTable = "<h3>My Basket:</h3><table><thead><tr><th>Item</th><th>Quantity</th><th>price</th><th>Sub-total</th></tr></thead><tbody>";
for (x=0; x<=inputs.length-1; x++) {
if(inputs[x].type == 'checkbox' && inputs[x].checked == true) {
var quantity = ParseFloat(inputs[x+1).value);
var itemName = computer[x/2].split(",")[1];
var itemPrice = parseFloat(computer[x/2].split(",")[2])
var itemTotal = parseFloat(quantity*itemPrice);
totalPrice += itemTotal;
basketTable += "<tr><td>"+itemName+"</td><td>"+quantity+"</td><td>$"+itemPrice+"</td><td>$"+itemTotal+"</td></tr>";
}
}
basketTable +=" <tr><td> colspan='3'><b>Total:</b></td><td><b>$"+totalPrice+"</b></td></tr></tbody><table>";
rightsSide.innerHTML = basketTable;
}
update quantity to 1 when item is checked
function updateQty(id) {
var targetRow = document.getElementById(id);
var qtyBox = targetRow.getElementsByTagName('input')[1];
if (qtyBox.value == 0) {
qtyBox.value = 1;
} else {
qtyBox.value = 0;
}
}
Here's the HTML as requested
<form name="myForm" action="index.html" method="post">
<div id="table_container_left">
<button onclick="check();">Select All</button>
<button onclick="uncheck();">Unselect All</button>
<button onclick="addItems();">Add Items</button>
<table>
<thead>
<th><u>Item Code</u></th>
<th><u>Item</u></th>
<th><u>Qty</u></th>
<th><u>Price</u></th>
</thead>
<tbody>
<script type="text/javascript">
for(x=0; x<=computer.length-1; x++) {
document.write("<tr id='"+x+"'><td><label><input type='checkbox' name='item' value='"+x+"' onclick='updateQty('"+x+"');'/> "+computer[x].split(",")[0]+"</label></td><td>"+computer[x].split (",")[1]+"</td><td> <input name='qty' id='qty' type='textbox' value='0' onchange='qtychange ('"+x+"');'/></td><td>$"+computer[x].split(",")[2]+"</td></tr>");
}
</script>
</tbody>
</table>
</div>
<div id="table_container_right">
<table id="shoppingBasket">
<input name='selectAll' type='button' value='Select All' onclick="itemSelected();"/>
<input name='clearAll' type='button' value='Clear All' onclick=""/>
<input name='removeItem(s)' type='button' value='Remove Item(s)' />
<input name='sortItemCode' type='button' value='Sort by Item Code' disabled='disabled' />
<input name='sortPrice' type='button' value='Sort by Price' disabled='disabled' />
</tbody>
</table>
</div>
</div>
</form>

Your JS syntax is way off, this is what it should look like
function addItems(field) {
for (i = 0; i <= field.length-1; i++)
{
if (field[i].checked == true)
{
if (computer[i]!=null) {
selected[i] = computer[i];
}
}
}
}

Half of your if statements are missing parentheses, that's some basic wrongfulness.
I don't know what and where should any of the variables be, but here is my best shot:
function addItems(field) {
var i;
for (i = 0; i < field.length; i++) {
if (field[i].checked === true) {
if (computer[i] !== null) {
selected[i] = computer[i];
}
}
}
}

You are using i = 0 rather than var i = 0, which will introduce a global variable. This could be a problem if you're writing similar code elsewhere.
Your if-statements are not statements at all. They look like pseudo-code. You're also comparing with = rather than ==, which will cause an assignment rather than a condition, even if you fix up your syntax.
You are not properly indenting your code, which will make you much more prone to introduce new errors.
These are the general issues I notice immediately. Of course, heaps of things could be wrong with this code. fields might not be an array, computer and selected might not match the size of fields, etc.
If you have any specific problem, please describe that, and we may be able to address it.