Блог

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

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

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

}
  

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

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

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

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

Вы должны добавить 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>'
}