为什么我的JavaScript函数没有返回选中的数组值

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

本文关键字：数组 返回 我的 JavaScript 函数 为什么      更新时间：2023-09-26

在下面的代码中，我的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>

问题在您的for loop。

用途：

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

代替：

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

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

此外，由于subTotal变量未在funRun1()函数中定义，以下块返回ReferenceError：

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

我会将您的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> 之前

除了Zanon建议的更改外，在函数funrun1（）-中使用这两行

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

此外，我建议您从按钮的funrun（）onclick事件内部调用funrun1（）。

问题是，当在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 Fiddle。https://jsfiddle.net/Kitchenfinks/5ovkdh2c/

快乐编码！

相关文章：