Objectives

In this assignment you will:

Demonstrate skills/techniques learned from earlier assignments.

Demonstrate the use of document.getElementById to read elements from the DOM.

Demonstrate the use of the textContent property to read the contents of an element.

Demonstrate the use of the Number() method to convert a string into a number.

Demonstrate the use of the textContent property to change the contents of an element.

Solve this Problem

Write a JavaScript program that solves the following problem:

Youie buys 3 items at the campus bookstore. A backpack, a calculator, and a textbook.

The backpack costs $56.99. The calculator costs $104.89. The textbook costs $51.97.

The bookstore charges 13% sales tax.

What is the subtotal amount for the 3 items?

What is the sales tax amount for the 3 items?

What is the total cost for the 3 items after the sales tax is added to the subtotal?

HTML for this Assignment

Use the following HTML for this assignment. Copy this HTML and paste it into your HTML file.

Replace "Your name here" (highlighted in yellow below) with your name.

                        
  
Changing the DOM by ID: getElementById  
  
Introduction  
In this assignment you will use JavaScript to read 3 item prices from the DOM.   Calculate a subtotal, the sales tax amount and the total cost.  Then you will update the DOM with the calculated values.  
  
In this assignment you will:  
  
Demonstrate skills/techniques learned from earlier assignments.  
Demonstrate the use of document.getElementById to read and change elements from the DOM.  
Demonstrate the use of textContents to read and change the text contents of an element in the DOM.  
  
  
  
Purchased Items                     
 
 
 
Item Name
 
Quantity
 
Item Price
 
 
 
 
 
Backpack
1
56.99
 
Calculator
1
104.89
 
Textbook
1
51.97
 
 
 
Subtotal
 
Tax
 
Total Cost
 
 
  
  
      

Instructions

In this assignment, you will read several HTML elements from the provided HTML file using getElementById method.

Then you will read the text content from the HTML elements using "textContent", convert the text into numbers using the Number() property.

Like in the previous assignments, you will do some calculations.

Unlike previous assignments, you will NOT output anything to the console. You will use "textContent" to change the contents of the DOM.

This program needs to be written as functions. Write small functions for this assignment. Break this program down into several functions.

There must be no variables declared or used in the global scope.

The program must meet these criteria:

Must follow the standards followed in previous programs: include meaningful comments. Use strict mode to enforce good coding practices. Variables are initialized at the beginning of each function. Uses "const" and "let" correctly. It does not use "var" to initialize variables. Variables are kept out of global scope by compartmentalizing them inside functions. The program must be well-formatted and easy to read and follow the Input, Processing, Output (IPO) pattern. The program must be broken up into small functions.

Use document.getElementById to read the prices of the 3 input elements from the DOM: back-price, calc-price, and text-price.

Use document.getElementById to read the prices of 3 output elements from the DOM: sub-total, tax-amount, and total.

Use the textContent property of the elements to read the text contents from those 3 input DOM elements.

Convert the text content from the 3 DOM input elements into numbers using the Number() method.

Calculate the sum of the item prices.

Calculate the amount of sales tax.

Calculate the total price.

Use the textContent property of the 3 output elements to output the subtotal, sales tax, and total price into the DOM. Use template literals to add a "$" to the output values. FYI, we'll soon learn a better way to format currency.

I want my code written in function and don't do the array, but also output into the DOM.

Here is my code: It's still error

"use strict";

// Get the elements from the DOM using getElementById

function declarePrices() {

let backPrice = document.getElementById("back-price").textContent;

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

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

let pricesTax = [backPrice, calcPrice, textPrice];

return pricesTax;

}

function salestaxRate() {

const salestaxRate = 0.13;

return salestaxRate;

}

// Calculate the subtotal

function calcsubTotal() {

const subtotal = declarePrices()[0] + declarePrices()[1] + declarePrices()[2];

return subtotal;

}

// Calc sales tax

function calcsalesTax() {

let salesTax = 0;

salesTax = calcsubTotal() * salestaxRate();

return salesTax;

}

// Calc final cost

function calcfinalCost() {

let finalcostAmount = 0;

finalcostAmount = calcsubTotal() + calcsalesTax();

return finalcostAmount;

}

const subTotalElem = document.getElementById("sub-total");

const taxAmountElem = document.getElementById("tax-amount");

const totalElem = document.getElementById("total");

// Update the elements with the calculated values

subTotalElem.textContent = "$" + subtotal.toFixed(2);

taxAmountElem.textContent = "$" + taxAmount.toFixed(2);

totalElem.textContent = "$" + total.toFixed(2);