pass multiple html element as args in function

Question

I want to calculate the innerText of some html element.

for that I wrote a function that will take "arguments" keyword as parameter. So that I can pass as many element possible.

function body is like below:

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')

but the function is giving me error saying : Uncaught TypeError: Cannot read property 'innerText' of null

But if I write the function like below it works:

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

what is the wrong with first function? Can somebody help me out?

as you're using es6 syntax, the recommended way to handle variable arguments is to use `function totalCalculation(...args)`, where `args` will be your arguments array rather than using the `arguments` object — Nick Parsons, Aug 21 '21 at 06:06

score 3 · Accepted Answer · answered Aug 21 '21 at 06:00

You are using arguments keyword in wrong way.

You don't have to write it explicitly.

simply use:

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')

score 1 · Answer 2 · answered Aug 21 '21 at 05:58

1

Pass the argument as array:

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

answered Aug 21 '21 at 05:58

Snehasish Karmakar

686
1
6
15

score 1 · Answer 3 · answered Aug 21 '21 at 05:59

Your issue has to do with the fact that only 1 argument is declared in the function, but you pass multiple arguments when you invoke it.

The solution is to pass an array as 1 argument to totalCalculation After doing that, you can iterate over them like you do in the body of the function.

Updated code:


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'])

pass multiple html element as args in function

3 Answers3