Javascript checkbox sum

Question

I have this assignment that I'm supposed to make an "Order" page with a form and items in the checkbox format. I wrote a function in javascript to add the values of the marked checkboxes together and return me a total. It was working fine yesterday, but I might have done something yesterday without noticing and it is not adding the values anymore.

Here is the function:

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementByName("total").value = "$" + total.toFixed(2);
}

Select your items:
<br>
<input name="product" value="3.65" type="checkbox" onclick="totalIt()" /> Item 1 - $3.65
<br>
<input name="product" value="5.50" type="checkbox" onclick="totalIt()" /> Item 2 - $5.50
<br>
<input name="product" value="3.29" type="checkbox" onclick="totalIt()" /> Item 3 - $3.29
<br>
<input name="product" value="7.99" type="checkbox" onclick="totalIt()" /> Item 4 - $7.99<br>
<input name="product" value="5.45" type="checkbox" onclick="totalIt()" /> Item 5 - $5.45<br>
<input name="product" value="99.99" type="checkbox" onclick="totalIt()" /> Item 6 - $99.99<br>
<input name="product" value="30.00" type="checkbox" onclick="totalIt()" /> Item 7 - $30.00
<br> Total:
<br>
<input value="$0.00" readonly="readonly" type="text" name="total" />

Am I not seeing something?

halfer · Accepted Answer · 2018-12-29 13:14:23Z

10

document.getElementByName("total") is the problem (not the missing s at the ened of Element), should be :

document.getElementsByName("total")[0].value = "$" + total.toFixed(2);

Since getElementsByName() returns a list of elements you should get the first element to assign the value to using [0], else you could use querySelector() like :

document.querySelector('input[name="total"]').value = "$" + total.toFixed(2);

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}

Select your items:
<br>
<input name="product" value="3.65" type="checkbox" onclick="totalIt()" /> Item 1 - $3.65
<br>
<input name="product" value="5.50" type="checkbox" onclick="totalIt()" /> Item 2 - $5.50
<br>
<input name="product" value="3.29" type="checkbox" onclick="totalIt()" /> Item 3 - $3.29
<br>
<input name="product" value="7.99" type="checkbox" onclick="totalIt()" /> Item 4 - $7.99<br>
<input name="product" value="5.45" type="checkbox" onclick="totalIt()" /> Item 5 - $5.45<br>
<input name="product" value="99.99" type="checkbox" onclick="totalIt()" /> Item 6 - $99.99<br>
<input name="product" value="30.00" type="checkbox" onclick="totalIt()" /> Item 7 - $30.00
<br> Total:
<br>
<input value="$0.00" readonly="readonly" type="text" name="total" />

edited Dec 29, 2018 at 13:14

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Nov 30, 2017 at 20:48

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arthur Figueiredo Over a year ago

Thanks guys. It is working better than before. The only thing now though, is that it doesn't work on chrome for some reason, just on Firefox. Any ideas?

Arthur Figueiredo Over a year ago

Yup, that was it. Thanks a lot.

Scath · Accepted Answer · 2017-11-30 20:49:00Z

5

There is no getElementByName in javascript you can use getelementById instead and it works fine.

function totalIt()
{
   var input = document.getElementsByName("product");
   var total = 0;
   for (var i = 0; i < input.length; i++)
   {
      if (input[i].checked)
      {
         total += parseFloat(input[i].value);
      }
   }
   document.getElementById("total").value = "$" + total.toFixed(2);
}

Select your items:
    <br>
    <input name="product" value="3.65" type="checkbox" onclick="totalIt()"/>
    Item 1 - $3.65
    <br>
    <input name="product" value="5.50" type="checkbox" onclick="totalIt()"/>
    Item 2 - $5.50
    <br>
    <input name="product" value="3.29" type="checkbox" onclick="totalIt()"/>
    Item 3 - $3.29
    <br>
    <input name="product" value="7.99" type="checkbox" onclick="totalIt()"/>
    Item 4 - $7.99<br>
    <input name="product" value="5.45" type="checkbox" onclick="totalIt()"/>
    Item 5 - $5.45<br>
    <input name="product" value="99.99" type="checkbox" onclick="totalIt()"/>
    Item 6 - $99.99<br>
    <input name="product" value="30.00" type="checkbox" onclick="totalIt()"/>
    Item 7 - $30.00
    <br>
    Total:
    <br>
    <input value="$0.00" readonly="readonly" type="text" id="total"/>

answered Nov 30, 2017 at 20:49

Scath

3,81710 gold badges32 silver badges40 bronze badges

1 Comment

Arthur Figueiredo Over a year ago

Thanks guys. It is working better than before. The only thing now though, is that it doesn't work on chrome for some reason, just on Firefox. Any ideas?

Collectives™ on Stack Overflow

Javascript checkbox sum

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related