Question

在以下代码中，我的alert()返回 0 时应返回选中的复选框值。我需要它返回与复选框关联的指定数组中的值。

<!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>

Answer 1

问题发生在for loop。

使用：

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

而不是：

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

原因是您不应该以大小定义访问数组元素。

此外，以下块返回 ReferenceError ，因为subTotal函数未定义funRun1()变量：

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

Answer 2

我会将您的funRun()更改为此

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);     
}

将其应用于funRun1()，你会没事的。

此外，由于此

，控制台中出现错误

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

原因是您的subTotal范围仅在funRun1()

我甚至建议将您的脚本放在</body>

之前

Answer 3

问题在于，当你在for循环中使用i进行索引时，那时它是0，这意味着你的循环根本不会迭代。因此，变化：

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

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

要：

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

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

和更改

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

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

要：

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

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

另外，这里有一个适合你的JS小提琴。 https://jsfiddle.net/Kitchenfinks/5ovkdh2c/

快乐的编码！

Answer 4

除了Zanon建议的变化之外，在函数funrun1（）中取这两行 -

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

另外，我建议你从funrun（）onclick事件中调用funrun1（）。

为什么我的JavaScript函数没有返回已检查的数组值？

4 个答案: