在函数中传递多个html元素作为参数[重复]答案

【问题标题】：pass multiple html element as args in function [duplicate]在函数中传递多个html元素作为参数[重复]
【发布时间】：2021-10-22 11:58:42
【问题描述】：

我想计算一些html元素的innerText。

为此，我编写了一个将“arguments”关键字作为参数的函数。这样我就可以传递尽可能多的元素。

函数体如下：

function totalCalculation(arguments) {
    let total = 0;
    for (i = 0; i < arguments.length; i++) {
       // getting all the required fields to be calculated from the arguments
       const fieldAmount = parseInt(document.getElementById(arguments[i]).innerText);
       total += fieldAmount;
    }

    document.getElementById('total-price').innerText = total;
    document.getElementById('grand-total-price').innerText = total;
}
totalCalculation('total-price', 'first-product', 'second-product', 'delivery')

但该功能给我错误提示：Uncaught TypeError: Cannot read property 'innerText' of null

但是，如果我像下面这样编写函数，它就可以工作：

function totalCalculation() {
    const totalPrice = parseInt(document.getElementById('total-price').innerText);
    const firstProductPrice = parseInt(document.getElementById('first- 
    product').innerText);
    const secondProductPrice = parseInt(document.getElementById('second- 
    product').innerText);
    const deliveryCharge = parseInt(document.getElementById('delivery').innerText);

    const total = totalPrice + firstProductPrice + secondProductPrice + 
    deliveryCharge
    document.getElementById('total-price').innerText = total;
    document.getElementById('grand-total-price').innerText = total;
}

第一个函数有什么问题？有人可以帮帮我吗？

【问题讨论】：

当您使用 es6 语法时，处理变量参数的推荐方法是使用function totalCalculation(...args)，其中args 将是您的参数数组，而不是使用arguments 对象

标签： javascript html function dom arguments

【解决方案1】：

您以错误的方式使用了arguments 关键字。

你不必明确地写出来。

简单地使用：

function totalCalculation() {
    let total = 0;
    for (i = 0; i < arguments.length; i++) {
       // getting all the required fields to be calculated from the arguments
       const fieldAmount = parseInt(document.getElementById(arguments[i]).innerText);
       total += fieldAmount;
    }

    document.getElementById('total-price').innerText = total;
    document.getElementById('grand-total-price').innerText = total;
}
totalCalculation('total-price', 'first-product', 'second-product', 'delivery')

【讨论】：

【解决方案2】：

将参数作为数组传递：

totalCalculation(['total-price', 'first-product', 'second-product', 'delivery']);

【讨论】：

【解决方案3】：

您的问题与函数中只声明了一个参数有关，但在调用它时传递了多个参数。

解决方案是将数组作为 1 个参数传递给 totalCalculation 完成之后，您可以像在函数体中那样迭代它们。

更新代码：


function totalCalculation(arguments) {
    let total = 0;
    for (i = 0; i < arguments.length; i++) {
       // getting all the required fields to be calculated from the arguments
       const fieldAmount = parseInt(document.getElementById(arguments[i]).innerText);
       total += fieldAmount;
    }

    document.getElementById('total-price').innerText = total;
    document.getElementById('grand-total-price').innerText = total;
}

// Total Calculation now has 1 argument as an array, that can then be iterated over.
totalCalculation(['total-price', 'first-product', 'second-product', 'delivery'])

【讨论】：