Is there a way for this? What I want to happen is the hyperlinks from the left side will have sum totals, and so on and on the final page/tab, the summation of all the hyperlinks will be shown there. Here's a jsFiddle to better understand my point https://jsfiddle.net/nerdfighter/121myofn/1/
Here's the initial JavaScript code I wrote in adding the checked chekcboxes
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
window.onload = function() {
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
var new_total = parseFloat(document.getElementById('input').value);
console.log(new_total);
document.getElementById('input').value = new_total + add
}
}
}
</script>
This is just a small project and I don't I won't be using server-side.
There's no id="payment-total"
nor id="input"
elements in your jsFiddle. So it won't work.
The algorithm is looking correct. But I recommend to pay more attention to strict code formatting - that helps to avoid mistakes.
I've added the following lines and jsFiddle began to work:
<span id="payment-total">0</span>
<input id="input" value="0">
Update by comments:
// TODO: Start using addEventListener() instead
window.onload = function() {
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
// TODO: Consider state variables instead of parsing innerHTML
// TODO: Never miss semicolons. It works, but causes hard debug sometimes
total.innerHTML = parseFloat(total.innerHTML) + add
var new_total = parseFloat(document.getElementById('input').value);
console.log(new_total);
document.getElementById('input').value = new_total + add
// Per tab total calculation
var tabTotalEl = document.getElementById(this.dataset.tabTotalId);
tabTotalEl.innerHTML = parseFloat(tabTotalEl.innerHTML) + add;
}
}
}
Add sum elements like this
<span id="tab-vegetables-total">0</span>
Add data-tab-id="tab-vegetables-total"
attributes to the checkboxes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.