Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

The code is down below and it needs to be in javascript (JS): 1. At the start of the JavaScript file, youll see the declarations

The code is down below and it needs to be in javascript (JS):

1. At the start of the JavaScript file, youll see the declarations for two arrays: one for names and one for heights, and each array contains four elements. Youll also see the code for the $ function as well as an onload event handler that attaches three functions named addHeight(), showResult(), and displayHeightI() to the click events of the buttons.

2. Write the showResult () function. It should derive the average height and the highest height from the arrays and then display the results in the div element with result as its id, as shown above. To show the results, you need to add nodes to the DOM with the heading as an h2 element and the average and highest height as elements. The easiest way to do that is to use the innerHTML property as shown in figure 6-13 in your Murachs book.

3. Write the displayHeight() function. It should get the names and height from the arrays and display them as rows in the HTML table element with height_table as its id, as shown above.

4. Write the addHeight() function. It should add a name and height to the two arrays. To test whether this works, you can click the Display Heights button and see if the new name and height have been added to the table.

5. If you havent already done it, add data validation to addHeight() function. The Name entry must not be empty and the Height entry must be a positive number from 0 through 100. If either entry is invalid, use the alert() method to display this error message: You must enter a name and a valid height.

6. Make sure that your application moves the cursor to the Name field when the application starts and after a name and height have been added to the array (or Add heights to Array button is clicked).

7. Verify there are no errors.

HTML:

Student heights

Heights of Students

Use of Array with Heights


Validate HTML
Validate CSS

CSS:

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; padding: 10px 20px; width: 600px; border: 3px solid blue; } h1 { color: blue; margin-top: 0; margin-bottom: .5em; } h2 { color: blue; font-size: 120%; padding: 0; margin-bottom: .5em; } main { padding: 1em 2em; } label { float: left; width: 3em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } p { margin: 0; } td { width: 10em; }

JS:

var names = ["Tom", "Lily", "Jose", "Sarah"]; var height = [65, 60, 72, 68];

var $ = function (id) { return document.getElementById(id); };

function showResult() { var avg = 0.0,

highest = 0;

for (var i = 0; i < scores.length; i++) {

avg += parseFloat(scores[i]);

if (scores[highest] < scores[i])

highest = i;

}

avg = avg / scores.length;

$("results").innerHTML = "Average score = " + avg + "
";

$("results").innerHTML += "High Score = " + names[highest] + " with a score of " + scores[highest];

} }

function displayHeight() { }

function addHeight() { }

window.onload = function () { $("show_results").onclick = showResult; $("add").onclick = addHeight; $("display_height").onclick = displayHeight; };

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Design And SQL For DB2

Authors: James Cooper

1st Edition

1583473572, 978-1583473573

More Books

Students also viewed these Databases questions