if$($document$.$readyState $===$ 'loading'$)\{$

document.addEventListener$(\text{'}$DOMContentLoaded$\text{'},$calculateCost $)$

$\}$ else$\{$

calculateCost$()$;

$\}$

function calculateCost $()\{$

const backpackPrice $=$ Number$($document$.$getElementById$(\text{'}$back$-$price'$).$textContent$)$;

const calculatorPrice $=$ Number$($document$.$getElementById$(\text{'}$calc$-$price'$).$textContent$)$;

const textbookPrice $=$ Number$($document$.$getElementById$(\text{'}$text$-$price'$).$textContent$)$;

const taxRate $=0\mathrm{.}13$;

const subTotal $=$ calculateSubtotal$($backpackPrice$,$ calculatorPrice, textbookPrice$)$;

const salesTax $=$ calculateSalesTax$($subTotal$)$;

const totalCost $=$ calculateTotal$($subTotal$,$ salesTax$)$;

console.log$(\text{'}$Subtotal: $$\text{'}+$ subTotal.toFixed$(2))$;

console.log$(\text{'}$Sales Tax: $$\text{'}+$ salesTax.toFixed$(2))$;

console.log$(\text{'}$Total Cost: $$\text{'}+$ totalCost.toFixed$(2))$;

$\}$

function calculateSubtotal$($backpack$,$ calculator, textbook$)\{$

return backpack $+$ calculator $+$ textbook;

$\}$

function calculateSalesTax$($subTotal$)\{$

const salesTax $=0\mathrm{.}13$

return subTotal $*$ salesTax;

$\}$

function calculateTotal$($subTotal$,$ salesTax$)\{$

return subTotal $+$ salesTax;

$\}$

Use document.querySelectorAll to read the $3$ elements that have a class attribute of "price" from the DOM. You will use $".$price" as the CSS selector to use with the querySelectorAll method to read the prices.

How do I interpret document.querySelectorAll into my code