Menu
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?
805
This code will auto sum the total value when the checkboxes is checked. To do this just copy and write these block of codes as shown below inside the text editor and save it as script.js inside the js directory There you have it we successfully created a Auto Sum Value Base On Checkbox using JavaScript.
JavaScript Checkbox 1 Checking if a checkbox is checked. First, select the checkbox using the selecting DOM methods such as getElementById () or querySelector (). 2 Getting values of multiple selected checkboxes. To accomplish this, you need to add two more HTML attributes to each checkbox: name and value . 3 Check / Uncheck all checkboxes. ...
To select the selected checkboxes, you use the querySelector () method: const checkboxes = document .querySelectorAll ( 'input [name="color"]:checked' ); Code language: JavaScript (javascript) And gather the value of each checkbox: let colors = []; checkboxes.forEach ( (checkbox) => { colors.push (checkbox.value); });
First, develop a check () function that checks or unchecks all checkboxes based on an input argument: When you click the button, you can call the check () function to select all checkboxes.
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" />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"/>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
