Question: Need to fix This program MUST use a conditional statement, document.readyState, and a DOMContentLoaded event listener to wait for the DOM to load before running

Need to fix

This program MUST use a conditional statement, document.readyState, and a DOMContentLoaded event listener to wait for the DOM to load before running the program. You must use the waiting for the DOM code to run the program - instead of running the program on lines 75-79. Lines 20-27 use getElementById to get the elements. That code doesn't belong in this program for this assignment. To get the prices from the element you must use textContent, and then use the Number() method to convert the text to a number. Then you can use that number to calculate a subtotal. The correct output is NOT written to the DOM.

Here is my code, can you fix it like the comment above?

"use strict";

// Check to see if page is still loading.

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

// Still loading, so add an event listener to wait for it to finish.

document.addEventListener('DOMContentLoaded', showItems);

} else {

// DOM is already ready, so run the program!

showItems();

}

// Read the prices of the 3 elements from the DOM: back-price, calc-price, and text-price.

function showItems() {

const backPrice = document.getElementById("back-price"); // Line 20

const calcPrice = document.getElementById("calc-price");

const textPrice = document.getElementById("text-price");

// Read the text contents from the 3 DOM elements.

const backpackPrice = backPrice.textContent;

const calculatorPrice = calcPrice.textContent;

const textbookPrice = textPrice.textContent; // Line 27

// Store the prices in an array

const prices = document.getElementsByClassName("price");

return prices;

}

// Function to add prices

function pricesAdd(prices) {

let sum = 0;

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

sum += Number(prices[i]);

}

return sum;

}

// Calculate the total price of items

function calcSum() {

const prices = showItems();

const subTotal = pricesAdd(prices);

return subTotal;

}

// Declare the tax rate

function taxRate() {

const taxRate = 0.13; // The bookstore charges 13% sales tax.

return taxRate;

}

// Calculate the sales tax

function calcTax(sum) {

let taxAmount = 0;

const rate = taxRate();

taxAmount = sum * rate;

return taxAmount;

}

// Calculate the final cost

function calcFinalCost(sum, tax) {

const finalCostAmount = sum + tax;

// Output the results

document.getElementById("sub-total").textContent = sum.toFixed(2);

document.getElementById("tax-amount").textContent = tax.toFixed(2);

document.getElementById("total").textContent = finalCostAmount.toFixed(2);

}

(function () { // Line 75

const sum = calcSum();

const tax = calcTax(sum);

calcFinalCost(sum, tax);

})(); // Line 79

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!