CODEWITHSUNDEEP
javascripthtmlcheckbox
Arthur Figueiredo
Arthur Figueiredo

Reputation: 89

Javascript checkbox sum

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?

Upvotes: 6

Views: 8037

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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" />

Upvotes: 10

Scath
Scath

Reputation: 3824

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"/>

Upvotes: 5

Related Questions