Develop Reference

JavaScript array application

I'm trying to create a sample accounting system, the checkbox can be add to the total after it's checked and the input text is the amount of the money.
but my result keep getting zero, I can't figure it out.
Anyone can help me handle this problem?
I've test that the length of total_ary is 0, I think that is the mainly problem
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount = [];
var total_ary = [];
var total = 0;
var price = [10, 20, 30];
var i = 0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked) {
amount.push(document.getElementsByName("amount").value); //get amounts of the products
} else {
amount.push(0); //If there is no input, add 0 to the array
}
}
for (i = 0; i < total_ary.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += parseInt(total_ary[i]); //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = "$" + total ;
}
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$20：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$30：<input type="text" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

You do
document.getElementsByName("amount").value
but getElementsByName returns a collection, not an element.
You do
var total_ary = [];
// ... code that doesn't reference total_ary
for (i = 0; i < total_ary.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += parseInt(total_ary[i]); //Counting the total money
}
But since the code in between doesn't reference total_ary, the total ends up being 0.
From a selected checkbox, you need to navigate to the associated input:
document.getElementsByName("amount")[i].value
since i is the cb index you're iterating over, the same i in the amount collection will refer to the input you need.
Or, more elegantly, just navigate to the next element in the DOM when a checkbox is checked, and take the number for each product's price from the DOM too. You can also select only the checked checkboxes immediately with a :checked selector, and attach the event listener using addEventListener (instead of an inline handler; inline handlers should be avoided)
document.querySelector('button').addEventListener('click', () => {
let total = 0;
for (const input of document.querySelectorAll('[name=cb]:checked')) {
const price = input.nextSibling.textContent.match(/\d+/)[0];
const amount = input.nextElementSibling.value;
total += price * amount;
}
document.getElementById("result").innerHTML = total + "元";
});
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input><br>
<input type="checkbox" name="cb" checked>$20：<input><br>
<input type="checkbox" name="cb" checked>$30：<input><br>
</fieldset>
<button>Count</button>
<p>Total = <span id="result">

document.getElementsByName() returns a collection of elements. so calling value property will not work there as it does not have such property.
You can hold input elements with amount_inputs variable and iterate over it (in the example below by using spread syntax and Array.reduce())
And with Array.reduce() you can calculate the sum of the prices. There is no need for var amount = [] and var total_ary = [] variables.
Hope this helps
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount_inputs = document.getElementsByName("amount")
var total = 0;
var price = [10, 20, 30];
total = [...input_cb].reduce((total, cb, i) => {
if(cb.checked){
total += (parseInt(amount_inputs[i].value) || 0) * price[i]
// ^^^^^^^^^ This is to avoid NaN multiplication
}
return total
},0);
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = total + "元";
}
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$20：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$30：<input type="text" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

Use Index while retrieving the element from document.getElementsByName("amount");
Use for loop on amount array not on total_ary
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount = [];
var total_ary = [];
var total = 0;
var price = [10, 20, 30];
var i = 0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked) {
amount.push(document.getElementsByName("amount")[i].value); //get amounts of the products
} else {
amount.push(0); //If there is no input, add 0 to the array
}
}
for (i = 0; i < amount.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += isNaN(parseInt(total_ary[i])) ? 0 : parseInt(total_ary[i]); //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = "$" + total ;
}
<fieldset>
<input type="checkbox" name="cb" checked>$10：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$20：<input type="text" name="amount"><br>
<input type="checkbox" name="cb" checked>$30：<input type="text" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

You have made a few mistakes:
(1) If you want to keep all the checkboxes checked at initial stage
use checked="true" in place of checked
(2) getElementsByName("amount") returns an array, so you should use the index as well
(3) total_ary length is 0 initially.. therefore, you should run the loop with input_cb. (Here, you can do both the task with a single loop: refer code below)
Refer the code with corrections:
<!DOCTYPE html>
<html>
<head>Order sys
<script>
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amount = [];
var total = 0;
var price = [10,20,30];
var i=0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked){
amount.push(parseInt(document.getElementsByName("amount")[i].value)); //get amounts of the products
}
else{
amount.push(0); //If there is no input, add 0 to the array
}
total += parseInt(amount[i] * price[i]) //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = total + "元";
}
</script>
</head>
<body>
<fieldset>
<input type = "checkbox" name="cb" checked="true">$10：<input type="text" id="amount_milk" name="amount" ><br>
<input type = "checkbox" name="cb" checked="true">$20：<input type="text" id="amount_soymlik" name="amount"><br>
<input type = "checkbox" name="cb" checked="true">$30：<input type="text" id="amount_blacktea" name="amount" ><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">
</body>
</html>

You can refactor your code:
Fist use inputs of type number <input type="number" name="amount"> to accept only numbers from your end users
Then, you can work with indexed arrays like [...document.querySelectorAll('input[name="cb"]')] and loop only one time with Array.prototype.reduce() to get the total
Code example:
function Totalamount() {
const inputNumberArr = [...document.querySelectorAll('input[name="cb"]')]
const inputAmountArr = [...document.querySelectorAll('input[name="amount"]')]
const priceArr = [10, 20, 30]
const total = inputNumberArr.reduce((a, c, i) => {
const num = c.checked ? +inputAmountArr[i].value : 0
return a + num * priceArr[i]
}, 0)
document.getElementById('result').innerHTML = '$' + 0
document.getElementById('result').innerHTML = '$' + total
}
<fieldset>
<input type="checkbox" name="cb" checked> $10：
<input type="number" name="amount"><br>
<input type="checkbox" name="cb" checked> $20：
<input type="number" name="amount"><br>
<input type="checkbox" name="cb" checked> $30：
<input type="number" name="amount"><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

Is this what you are looking for?
Errors that I identified.
Making use of document.getElementsByName("amount").value instead of making the respective amount field you were making use of the global selector.
Trying to loop total_ary array instead of amount array.
function Totalamount() {
var input_cb = document.getElementsByName('cb');
var amountInput = document.getElementsByName('amount');
var amount = [];
var total_ary = [];
var total = 0;
var price = [10,20,30];
var i=0;
for (i = 0; i < input_cb.length; i++) {
if (input_cb[i].checked && amountInput[i].value){
amount.push(parseInt(amountInput[i].value)); //get amounts of the products
}
else{
amount.push(0); //If there is no input, add 0 to the array
}
}
for (i = 0; i < amount.length; i++) {
total_ary.push(parseInt(amount[i] * price[i])); // Add the products' total price to array
total += parseInt(total_ary[i]); //Counting the total money
}
document.getElementById("result").innerHTML = "$" + 0;
document.getElementById("result").innerHTML = total + "元";
}
<fieldset>
<input type = "checkbox" name="cb" checked>$10
<input type="text" id="amount_milk" name="amount" ><br>
<input type = "checkbox" name="cb" checked>$20
<input type="text" id="amount_soymlik" name="amount"><br>
<input type = "checkbox" name="cb" checked>$30
<input type="text" id="amount_blacktea" name="amount" ><br>
</fieldset>
<button onclick="Totalamount()">Count</button>
<p>Total = <span id="result">

Why is output only showing on 2 of my input boxes?

Trying to learn JQUERY/HTML, so I am making a shopping cart. I am trying to output subtotal, tax, shipping, and total cost to input boxes. The first 2, sub total and shipping cost show, but nothing is outputted for the last 2 input boxes.
HTML
<div class="form-group">
<div class="subTotal">
<label for="subtotal"><span>Sub Total</span><span>*</span><input type="number" class="input-field" name="subtotal" id="subtotal" disabled/></label>
<label for="shipping"><span>Shipping</span><span>*</span><input type="number" class="input-field" name="shipping" id="shipping" disabled/></label>
<label for="tax"><span>Tax</span><span>*</span><input type="number" class="input-field" name="tax" id="taxCost" disabled/></label>
<label for="total"><span>Total</span><span>*</span><input type="number" class="input-field" name="total" id="total" disabled/></label>
</div>
</div>
JS
function calculateSum() {
var sum = 0;
// iterate through each td based on class and add the values
$(".cost").each(function () {
var value = $(this).text();
// add only if the value is number
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
var subtotal = sum;
var shippingCost = (sum * 0.085);
var tax = (((sum + shipping) * 0.11));
var total = (sum + shippingCost + tax);
$("#subtotal").val(subtotal);
$("#shipping").val(shippingCost);
$("#taxCost").val(tax);
$("#total").val(total);
};

Are you sure this isn't a typo?
var tax = (((sum + shipping) * 0.11));
Shouldn't it be
var tax = (((sum + shippingCost) * 0.11));

Alright so I tried to understand your code, first off I could not find .cost anywhere in the code so the output was 0 from the start, so I added a value to the inputs and then this.
This code block was your original code, the shipping variable is named wrongly, it's probably supposed to be shippingCost.
var tax = ((sum + shipping) * 0.11);
Here is the code.
https://jsfiddle.net/dbu41wpa/2/

Adding checkbox with multiple value

I have a set of books in checkboxes which a user can select. Every time a book is checked the price adds up. I also need to add its corresponding weight. I've modified this very useful example but to no avail.
<label class="checkbox" for="Checkbox1">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
<input value="50" bweight=".4" type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
<input value="30" bweight=".2" type="checkbox" class="sum" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
<input value="20" bweight=".6" type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn
</label>
<div class="card-charge-info">
<span id="payment-total">0</span>
</div>
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
totwgt = document.getElementById('payment-w');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
var add = this.wgt * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
totwgt.innerHTML = parseFloat(total1.innerHTML) + add
}
}
Heres the code https://jsfiddle.net/u8bsjegk/2/

There's several issues in your code. Firstly you define the add variable in two places, one for the value the other for weight so your calculation is broken from there. Also note that bweight is not a valid attribute on the input element. To add your own meta data you should use a data-* attribute instead.
Try this:
var inputs = document.getElementsByClassName('sum'),
totalValue = document.getElementById('payment-total'),
totalWeight = document.getElementById('payment-w');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var value = parseFloat(this.value);
var weight = parseFloat(this.dataset.weight);
totalValue.innerHTML = parseFloat(totalValue.innerHTML) + value
totalWeight.innerHTML = parseFloat(totalWeight.innerHTML) + weight
}
}
As you've tagged this question with jQuery, here's a working implementation for that
var $inputs = $('.sum'),
$totalValue = $('#payment-total'),
$totalWeight = $('#payment-w');
$inputs.change(function() {
var value = parseFloat(this.value);
var weight = parseFloat($(this).data('weight'));
$totalValue.text(function(i, text) {
return parseFloat(text) + value;
});
$totalWeight.text(function(i, text) {
return parseFloat(text) + weight;
});
})
Working example

You have few issues:
You redeclare add variable
you have typo in total1 it should be totwgt
you don't have element with payment-w id
instead of this.wgt you should use this.getAttribute('bweight')
https://jsfiddle.net/u8bsjegk/6/

Adding value of selected radio button to an equation

I am at my wits end. I cannot figure out how to add the value of the radio button to the equation. Can someone give me a clue at least on this??
If I don't have the radio button function included, this works fine.
<input type="radio" class="InternetCost" name="int" id="no_int" value="0">None<br>
<input type="radio" class="InternetCost" name="int" id="ten" value="10">10<br>
<input type="radio" class="InternetCost" name="int" id="twenty" value="20">20<br>
<input type="radio" class="InternetCost" name="int" id="thirty" value="30">30<br>
//Try to select radio button
var values = document.getElementsByName("int");
function getValue() {
for(var i = 0; i < values.length; i++) {
if(values[i].checked == true) {
selectedValue = values[i].value;
console.log('value=' + selectedValue);
}
}
}
function calculate()
{
//get selectedValue - this is where I am lost!
var radioValue = getValue()*1;
//Package
var pkgCost = document.getElementById("pkg").value*1;
//Package - Static
var equipPkg = document.getElementById("pep").value*1;
//Additional amount
var addBox = document.getElementById("addtl").value*1;
//Additional Box cost - static
var totalNum = document.getElementById("add_cost").value*1;
//Service amount
var dvrSvc = document.getElementById("dvr_svc").value*1;
//Service cost - static
var dvrCost = document.getElementById("dvr_cost").value*1;
// Sum everything
var SumAll = pkgCost + equipPkg + (addBox*totalNum) + (Svc*Cost) + radioValue;
// print the total
document.getElementById("Sum").innerHTML = SumAll.toFixed(2)
}

Your solution should work fine except you're using
console.log('value=' + selectedValue);
instead of actually returning the value.
return selectedValue;
Example

How do I get the sum of radio buttons groups using parameters instead of values

I have multiple sets of radio buttons where the selected values of each set need to be added and displayed to the user. So far I have been changing the values in the function in a switch statement to handle the addition.
<form name="config" id="config">
<div class="row-fluid">
<h3>Memory</h3>
<input type="radio" name="section1" value="4gb" onclick="changePrice(0)" checked>4gb<br>
<input type="radio" name="section1" value="8gb" onclick="changePrice(100)">8gb (+$100)<br>
<input type="radio" name="section1" value="16gb" onclick="changePrice(200)">16gb (+$200)
</div>
<div class="row-fluid">
<h3>Primary Hard Drive</h3>
<input type="radio" name="section2" value="dell" onclick="changePrice(0)" checked>Dell<br>
<input type="radio" name="section2" value="asus" onclick="changePrice(100)">Asus(+$100)
</div>
</form>
<div id="price"></div>
The script I am using right now is
var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;
function(changePrice){
var val1, val2;
switch(document.config.section1.value){
case "4gb":
val1 = 0;
break;
case "8gb":
val1 = 100;
break;
case "16gb":
val1 = 200;
break;
default:
val1 = 0;
}
switch(document.config.section2.value){
case "dell":
val1 = 0;
break;
case "asus":
val1 = 100;
break;
default:
val1 = 0;
}
var sum = val1 + val2 + baseNum;
displayPrice.innerHTML = sum;
}
Is there a way I can do these calculations using the parameters passed through the changePrice function (so I don't have to change the values in the switch statements)?

Here's how to do this without jQuery.
You'll need to tell the changePrice function which section it should change the price for so you'll need to change the calls to look like this changePrice(1, 100) where 1 is the section and 100 is the price change. Then you can collect all the section prices individually and sum them like so:
var displayPrice = document.getElementById("price");
var baseNum = 200;
displayPrice.innerHTML = baseNum;
var sections = {};
function changePrice(section,val){
// add or update the section value
sections[section] = val;
// start with the base price
var sum = baseNum;
// loop over all the sections and add them to the base price
for(var key in sections) {
sum = sections[key] + sum;
}
displayPrice.innerHTML = sum;
}
Here's a jsfiddle

If you change your function definition to the following, it will take in your parameter.
function changePrice(val1)
If you could change your the value attribute on each of your input fields to contain your increment value, it would make the process of calculating your sum much easier. (This may not be appropriate to the problem you are trying to solve.
Basic solution with jQuery
var sum = $("input[name=section1]").val() + $("input[name=section2]").val();
If your list is very long, you could iterate over your radio button sets with jQuery
var sum = 0;
$("input[type=radio]").each(function(){sum += $(this).val();});

<html>
<head>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.R1.length; i++ ){
if( document.form1.R1[i].checked == true ){
val1 = document.form1.R1[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.R2.length; i++ ){
if(document.form2.R2[i].checked == true ){
val2 = document.form2.R2[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2);
document.getElementById('totalSum').innerHTML=sum;
}
</script>
</head>
<body>
Choose a number:<br>
<form name="form1" id="form1">
<br>
R1 <input id="rdo_1" type="radio" value="5" name="R1" onClick="DisplayPrice(this.value);" checked>5
<br>
R1 <input id="rdo_2" type="radio" value="10" name="R1" onClick="DisplayPrice(this.value);">10
<br>
</form>
Choose another number:<br>
<form name="form2" id="form2">
<br>
R2 <input id="rdo_1" type="radio" value="15" name="R2" onClick="DisplayPrice(this.value);" checked>15
<br>
R2 <input id="rdo_2" type="radio" value="20" name="R2" onClick="DisplayPrice(this.value);">20
<br>
</form>
Your total is Rs = <span name="totalSum" id="totalSum" > 20</span>
</body>
</html>