Создание нескольких функций из существующего кода

Question

Я получил свой код на работу, но мне нужно создать из него несколько функций, и каждый раз, когда я его создаю, он портит логику и сбрасывает мою таблицу

Мне нужно создать следующие функции:

calculateTax(); , calculateShipping(); calculateGrandTotal();

В основном:

function calculateTax(subtotal, rate) {
    var tax = subtotal * rate;
}

function calculateShipping(subtotal, threshold) {
    shipping = 40;
    if (subtotal > 1000)
        threshold = 1000;
        shipping = 0;
}

function calculateGrandTotal(subtotal,tax,shipping) {
     var grandTotal = subtotal + tax + shipping;
}

и предполагается, что результат будет таким:

Мой код (рабочий):

function calculateTotal(quantity, price) {

return quantity * price;

}

window.onload = () => {

var rate = 0.10;
var threshold = 1000;
var subtotal = 0;
var product_total = 0;
var subtotal = 0;


for (let i = 0; i < filenames.length; i++) {

subtotal += calculateTotal(quantities[i], prices[i]);

outputCartRow(filenames[i], titles[i], quantities[i], prices[i], calculateTotal(quantities[i], prices[i]));

}

var tax = subtotal * 0.10;

var shipping = 40;

if (subtotal > 1000)

shipping = 0;

var grandTotal = subtotal + tax + shipping;

document.getElementsByTagName("tbody")[0].innerHTML +=

`<tr class="totals">

<td colspan="4">Subtotal</td>

<td>$${subtotal.toFixed(2)}</td>

</tr>

<tr class="totals">

<td colspan="4">Tax</td>

<td>$${tax.toFixed(2)}</td>

</tr>

<tr class="totals">

<td colspan="4">Shipping</td>

<td>$${shipping.toFixed(2)}</td>

</tr>

<tr class="totals focus">

<td colspan="4">Grand Total</td>

<td>$${grandTotal.toFixed(2)}</td>

</tr>`;

}

Но если я попытаюсь это сделать (используя в качестве примера функцию налога)

var tax = calculateTax();


for (let i = 0; i < filenames.length; i++) {

subtotal += calculateTotal(quantities[i], prices[i]);

outputCartRow(filenames[i], titles[i], quantities[i], prices[i], calculateTotal(quantities[i], prices[i]));

}
function calculateTax(subtotal, rate){
    tax = subtotal * 0.10;
    var shipping = 40;
    if (subtotal > 1000)
    shipping = 0;
}

Это избавляет от нижней коробки с промежуточной суммой, налогом, доставкой и общей суммой

Не уверен, как создавать эти функции без избавления от коробок.

Answer 1

Вы должны добавить html-код для каждой строки в каждую функцию соответственно и вызывать их, чтобы нижнее поле отображалось правильно.

function calculateTax(subtotal, rate){
    tax = subtotal * 0.10;
    var shipping = 40;
    if (subtotal > 1000)
    shipping = 0;
    document.getElementsByTagName("tbody")[0].innerHTML +=
    '<tr class="totals">

    <td colspan="4">Tax</td>

    <td>$${tax.toFixed(2)}</td>

    </tr>'
}