Why is my JavaScript function not returning the checked array value?

Question

In the following code, my alert() is returning 0 when it should be returning the checked box value. I need it to return the value in the designated array associated with the checkbox.

<!DOCTYPE html>
<html>
<head> <title> Program 4 Parallel Arrays </title>
<style type="text/css"></style>

<script type="text/javascript">
    var priceArray = [45.25, 24.88, 32.35, 27.33,
                        34.85, 36.24, 85.33, 45.32];
    var pageArray = [1098, 536, 500, 792, 912, 1224, 899, 504];

    function funRun () {    
        var totalPages = 0;          
        for(i=0; i<document.bookForm.books[i].length; i++) {
            if(document.bookForm.books[i].checked == true) {
                totalPages = totalPages + pageArray[i];
            }
        }
        alert("totalPages : " + totalPages);     
    }

    function funRun1 () {
        var subTotal = 0;          
        for(i=0; i<document.bookForm.books[i].length; i++) {
            if(document.bookForm.books[i].checked == true) {
                subTotal = subTotal + priceArray[i];
            }
        }
        alert("subTotal : " + subTotal);     
    }

    tax = (.06 * subTotal)
    total= (subTotal + tax)
</script>
</head>
<body>

<form name="bookForm">  
    <input type="checkbox" name="books" value="Flanagan" />
        JavaScript, the Definitive Guide: $45.25 <br>
    <input type="checkbox" name="books" value="McFarland" />
        JavaScript & JQuery: The Missing Manual: $24.88 <br>
    <input type="checkbox" name="books" value="Morrison" />
        Head First JavaScript: $32.35 <br>
    <input type="checkbox" name="books" value="Wilton&McPeak" />
        Beginning JavaScript: $27.33 <br>
    <input type="checkbox" name="books" value="Quigley" />
        JavaScript by Example: $34.85 <br> 
    <input type="checkbox" name="books" value="Goodman" />
        JavaScript Bible: $36.24 <br>
    <input type="checkbox" name="books" value="Gosselin" />
        JavaScript: The Web Technologies Series: $85.33 <br> 
    <input type="checkbox" name="books" value="Suehring" />
        JavaScript Step by Step: $45.32 <br>
    <br>
    <input type="button"
        value="Calculate Total"
            onclick="funRun();funRun1()"/>

        <input type="reset"/>
    <br>
    <br>
    <input type="text" name="totalPages"/>Total Pages<br>
    <input type="text" name="subTotal"/>Subtotal<br>
    <input type="text" name="tax"/>Tax<br>
    <input type="text" name="total"/>Total</p>

</body>
</html>

Zanon · Accepted Answer · 2015-03-26 03:16:33Z

2

The issue is at your for loop.

Use:

for(i=0; i<document.bookForm.books.length; i++) {

Instead of:

for(i=0; i<document.bookForm.books[i].length; i++) {

The reason is that you should not access the array element at the size definition.

Also, the following block is returning a ReferenceError since the subTotal variable was not defined out of the funRun1() function:

tax = (.06 * subTotal)
total= (subTotal + tax)

edited Mar 26, 2015 at 3:16

answered Mar 26, 2015 at 2:52

Zanon

31k21 gold badges119 silver badges127 bronze badges

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

Comments

Viet Anh · Accepted Answer · 2015-03-26 02:56:14Z

0

I would change your funRun() to this

function funRun () {    
    var inputs = document.forms[0].querySelectorAll('[name=books]');

    var totalPages = 0;          

    for(i=0; i<inputs.length; i++) {
        if(inputs[i].checked) {
            totalPages = totalPages + pageArray[i];
        }
    }

    alert("totalPages : " + totalPages);     
}

Apply the same to funRun1() and you'll be fine.

Also, an error is raised in the console because of this

tax = (.06 * subTotal)
total= (subTotal + tax)

The reason is that your subTotal scope is only in funRun1()

I would even suggest putting your script just before the </body>

answered Mar 26, 2015 at 2:56

Viet Anh

1393 gold badges6 silver badges16 bronze badges

Comments

gkb · Accepted Answer · 2015-03-26 03:06:46Z

0

apart from the changes suggested by Zanon, take these two lines inside the function funrun1() -

tax = (.06 * subTotal)
total= (subTotal + tax)

Also, I would suggest you to call funrun1() from inside funrun() onclick event of the button.

answered Mar 26, 2015 at 3:06

gkb

1,4692 gold badges19 silver badges31 bronze badges

Comments

Dwight David Desotelle Jr. · Accepted Answer · 2015-03-26 03:14:06Z

0

The issue is that when you are indexing with i inside your for loop it is 0 at that time which means that your loop won't iterate at all. Therefore, Change:

for(i=0; i<document.bookForm.books[i].length; i++) {

if(document.bookForm.books[i].checked == true) {
       totalPages = totalPages + pageArray[i];
}
}

To:

for(i=0; i<document.bookForm.books.length; i++) {

if(document.bookForm.books[i].checked == true) {
       totalPages = totalPages + pageArray[i];
}
}

and Change

for(i=0; i<document.bookForm.books[i].length; i++) {

 if(document.bookForm.books[i].checked == true) {
       subTotal = subTotal + priceArray[i];
}
}

To:

for(i=0; i<document.bookForm.books.length; i++) {

 if(document.bookForm.books[i].checked == true) {
       subTotal = subTotal + priceArray[i];
}
}

In addition, here is a working JS Fiddle for you. https://jsfiddle.net/Kitchenfinks/5ovkdh2c/

Happy Coding!

edited Mar 26, 2015 at 3:14

answered Mar 26, 2015 at 2:57

Dwight David Desotelle Jr.

584 bronze badges

2 Comments

Zanon Over a year ago

Changing a variable to a hardcoded value is not a good advice. If his forms is reduced, the code will break. So I've suggested document.bookForm.books.length instead of 8.

Dwight David Desotelle Jr. Over a year ago

Ah, you are correct. Your suggestion is much better. I will correct my style accordingly and avoid giving bad advice in the future. Thank you!

Collectives™ on Stack Overflow

Why is my JavaScript function not returning the checked array value?

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related