Question

TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...

TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++).

  1. What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool.
  2. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code?
  3. Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3); What is the change in the content displayed in the web page after fix the rounding error in floating-point arithmetic by using the toFixed() method?

ATTACHED BELOW ARE THE FILES YOU WILL NEED.

numberic-variable_problem.html

<!DOCTYPE html>
<html>
<head>
<title>A3_P2: Numeric Variable</title>
<link rel="stylesheet" href="css/c02.css" />
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
<img src="images/preview.jpg" alt="Sign" />
</div>
<script src="js/numeric-variable_problem.js"></script>
</body>
</html>

numeric-variable_problem.js

// Create three variables to store the information needed.
var $price;
var 5quantity;
var total;

// Assign values to the price and quantity variables.

$price = 5.95; //illustration for using floating-point numbers

quantity = 0.1; //illustration for using floating-point numbers

// Calculate the total by multiplying the price by quantity.
total = $price * quantity;

// Get the element with an id of cost.
var el = document.getElementById('cost');
el.textContent = '$' + total;

/*
NOTE: textContent does not work in IE8 or earlier
You can use innerHTML, but note the security issues on p228-231
el.innerHTML = '$' + total;
*/

c02.css

html {
height: 100%;}

body {
background-color: #b6a996;
background: url('../images/hobart.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: helvetica, arial, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
min-height: 100%;}
/*#colors {
   white-space: pre-line;
}
*/
#content {
background-color: #fff;
border: 3px double #31373f;
color: #31373f;
display: inline-block;
padding: 30px 50px;
margin: 20px auto 50px auto;
max-width: 580px;
min-height: 4em;
overflow: auto;
text-align: center;}

h1, h2 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}

h1 {
width: 278px;
height: 112px;
margin: 0 auto 0 auto;
padding-top: 40px;
background: url('../images/elderflower-logo.png') no-repeat bottom center;}

h2 {
width: 286px;
height: 18px;
margin: 0 auto 20px auto;
background: url('../images/custom-sign.png') no-repeat center center;}

#title {
font-size: 120%;
font-weight: bold;}

#cost, .action {
background-color: #f84c53;
color: #fff;
width: auto;
height: 1em;
padding: 0.5em 0.75em;
float: right;}
#cost {
position: relative;
top: 1em;
right: 2em;}
.action {
position: relative;
top: 1.3em;
right: -2.3em;}

#note {
background-color: #31373f;
border-radius: 0.5em;
color: #e3bb5a;
padding: 0.5em 1em;
margin-top: 1em;
text-transform: uppercase;
display: inline-block;}

a {
color: #e3bb5a;
text-decoration:none;}

.true, .false {
background: url("../images/tick-cross.png");
display: block;
float:right;
height: 25px;
width: 25px;}
.false {
background-position: 0 -25px;}

.message {
font-weight: bold;
line-height: 1.5em;
height: 2em;
display: block;
clear: left;
min-width: 10em;}

.message span {
font-weight: normal;}

.number {
text-align: left;}

table {
margin: 20px 100px 0 100px;}

tr td:first-child {
font-weight: bold;
padding-right: 20px;}

body:before, body:after {
content: "";
position: fixed;
background: #fff;
left: 0;
right: 0;
height: 20px;}

body:before {
top: 0;}

body:after {
bottom: 0;}

body {
border-left: 20px solid #fff;
border-right: 20px solid #fff;}

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Syntax Error :

  • numeric-variable_problem.js file invalid variable name is declared that is var 5quantity;
  • In javascript variable name can not start with the number.

Fixing syntax error :

  • After declaring valid variable name on the div will get the value as $0.5950000000000001.
  • Below is the screen.(Here image will be vary)

after using toFixed(3) :

  • After using toFixed(3) method will get the cost as $0.595 this means toFixed(3) will display only three decimal places after dot.

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Open the debug3-4.css file. The body element should have a width that is 90% of the...
Open the debug3-4.css file. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the web page. The style rule for the body element sets up a grid layout for the page. However, there are several errors in defining the grid areas, grid columns, and...
Please provide HTML code for the following: • Change the color of all <p> elements to...
Please provide HTML code for the following: • Change the color of all <p> elements to “blue" • Change the 3 border properties, so that they only show the border on the top side • Use the padding property to set the top and bottom paddings for <p> to "25px", and left and right paddings to "50px" • Style text in <h1> to uppercase letters, and text in <p> to capitalized letters • Remove the bullets/markers from the list items...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics. I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code...
Create a webpage with CSS Box Model: Create a basic web page using the 5 required...
Create a webpage with CSS Box Model: Create a basic web page using the 5 required html tags. Add paragraph tags and enclosed them with a div element. Using the CSS Box Model, style the div element to have a total width of 350px and a height of 250px. It should have 10px padding on all sides, a gray border of 5px on all sides, and 15px margins on both sides but none on the top and bottom. Add a...
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
What I need to do :) Go to the code_scroll.css file and create a style rule...
What I need to do :) Go to the code_scroll.css file and create a style rule for the section element with the id container with the following styles: 1. Set the width of the element to 900 pixels and the height to 370 pixels. 2. Horizontally center the element by adding a 10 pixel top/bottom margin and set the left/right margin to auto. 3. Place the element with relative positioning, setting the top value to 30 pixels and the left...
Let's say you have this in your code. Which of the following are true? (select only...
Let's say you have this in your code. Which of the following are true? (select only correct answers) Note: See FONT-SIZE info (Links to an external site.) re: font EM values h1, h2 { margin-top: 33px; font-family: Lobster; text-align: center; color: #333333; font-size: 1.3em; letter-spacing: .3em } Group of answer choices a. MARGIN-TOP: 33px; creates the same result as MARGIN: 33px 0 0 0; b. This defines a CSS "descendant selector" rule c. #333333 is a hex COLOR value that...
Java Script I need the code to produce these 3 output. I can only get it...
Java Script I need the code to produce these 3 output. I can only get it to produce input #3 I need it to produce the following: // Input #1: // http://www.example.com // Output // http://www.example.com // Input #2: // http://www.example.com?name=r2d2 // Output // http://www.example.com // name: r2d2 // Input #3: // http://www.example.com?name=r2d2&email=r2d2%40me.com&human=no // Output // http://www.example.com // name: r2d2 // email: [email protected] // human: no THIS IS WHAT I HAVE SO FAR: HTML <!DOCTYPE html> <html lang="en"> <head> <meta...
Question 1: What port is this application running on? Question 2: How many function definitions do...
Question 1: What port is this application running on? Question 2: How many function definitions do you see in this program? List the function names. If it’s an anonymous function write the function definition. Question 3: How many global variables are there in this program? What are they? (Hint: Some are programmer defined using keyword var and some provided by JavaScript language implicitly.) var http = require('http'); // function to calculate rabbit reproduction using fibonacci sequence function fibonacci(n) {     if...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT