Trouble setting and adding array values javascript

Question

I want to give each check box an integer value and then if the box is checked add the values and display the total in a text box with the ID="options". So far the code is not sending a value to the desired location. Any instruction on how to improve the code would be helpful. Thank you.

<html>
<body>

<form id="registration" name="registration">
<input name="opt1" value="5" type="checkbox"> Breakfast ($5)
<input name="opt2" value="10" type="checkbox"> Lunch ($10)
<input name="opt3" checked="checked" value="0" type="checkbox"> Happy Hour (free!)
<input id="options" name="options" type="text">
</form>

</body>
</html>

<script>

function getOptions() {

    var form = document.getElementById("registration"),
        inputs = form.getElementsByTagName("input"),
        result = 0;

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
            result += inputs[i].value;
            document.getElementById("options").value = result;
        }
    }
}

getOptions();

</script>

What do you mean "improve"? Does the current code have the desired effect or not? — nnnnnn
– nnnnnn, Commented Mar 3, 2015 at 2:08
You are missing a semicolon after var i = 0 in the for loop — icaru12
– icaru12, Commented Mar 3, 2015 at 2:13
I added the semicolon. Now it just displays 00 in the desired location, but nothing happens when i check the boxes. — Roy Orbison
– Roy Orbison, Commented Mar 3, 2015 at 2:16

icaru12 · Accepted Answer · 2015-03-03 02:47:01Z

1

You may need to attach onchange event handlers to the checkboxes as shown below. And you should parse inputs[i].value to a number using parseFloat() before adding it to result.

var form = document.getElementById("registration"),
    inputs = form.getElementsByTagName("input");

function getOptions() {
    var result = 0;
    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
            result += parseFloat(inputs[i].value);
        }
    }
    document.getElementById("options").value = result;
}

for (var i = 0, len = inputs.length; i < len; i++) {
    if (inputs[i].type === "checkbox") {
        inputs[i].onchange = function () {
            getOptions();
        }
    }
}

getOptions();

JSFiddle

edited Mar 3, 2015 at 2:47

answered Mar 3, 2015 at 2:27

icaru12

1,59216 silver badges21 bronze badges

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

3 Comments

Roy Orbison Over a year ago

Just curious if I can consolidate the second for loop by using forEach() after the first for loop. I need to make the code so that the grand total is updated every time a value changes, so I want to make the getOptions() function more succinct. Is it possible to use forEach() to achieve the same result as the second "for" loop?

icaru12 Over a year ago

Yes, you can use forEach() instead of for loop, but you must convert the input NodeList to an array like so Array.prototype.slice.call(form.getElementsByTagName("input")). That's because NodeLists are array-like but don't feature many of the methods provided by the Array, like forEach, map, filter, etc. Also take note that forEach() is considerably slower than for loop. I've created this JSFiddle that using forEach().

Roy Orbison Over a year ago

Thanks frosdqy. I was able to get it to work using the original "for" loop.

Collectives™ on Stack Overflow

Trouble setting and adding array values javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related