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?
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')
Pass the argument as array:
totalCalculation(['total-price', 'first-product', 'second-product', 'delivery']);
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'])