CODEWITHSUNDEEP
javascriptarraysfor-loop
Robert C Herrington
Robert C Herrington

Reputation: 39

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

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>

Upvotes: 1

Views: 86

Answers (4)

Zanon
Zanon

Reputation: 30760

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)

Upvotes: 2

Dwight David Desotelle Jr.
Dwight David Desotelle Jr.

Reputation: 48

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!

Upvotes: 0

gkb
gkb

Reputation: 1459

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.

Upvotes: 0

Viet Anh
Viet Anh

Reputation: 139

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>

Upvotes: 0

Related Questions