NEED HELP WITH SOME JAVASCRIPT EVENT HANDLERS

Each array represents the sales for a region, and each element in an array represents the regions sales for one quarter. For instance, the second element (index 1) in the third array represents region 3s sales for the second quarter. Your job is to add event handlers that display the data in those arrays.

Open the HTML/CSS and JavaScript files attached.

HTML FILE THAT WAS GIVEN:

Use a Sales array

Results

CSS FILE THAT WAS GIVEN:

body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

padding: 1em 2em;

width: 450px;

border: 3px solid blue;

}

h1 {

color: blue;

margin-top: 0;

margin-bottom: .5em;

}

h2 {

color: blue;

font-size: 120%;

padding: 0;

margin-bottom: .5em;

margin-left: 1em;

}

label {

float: left;

width: 3em;

text-align: right;

}

input {

margin-left: 1em;

margin-bottom: .5em;

}

textarea {

width: 300px;

height: 100px;

margin-left: 1em;

margin-bottom: .5em;

}

Look at the JavaScript code to see that it starts with the declarations for the five arrays that are described above. Note that the values of the elements in the arrays are coded in a comma-separated list where each value is assigned to the next element in the array. So the first value in the list is assigned to the element at index 0, the second value is assigned to the element at index 1, and so on. You can use this same technique as necessary throughout this assignment.

Add an event handler for the click event of the Show Sales By Quarter button. This handler should display the results in the text area below the Results heading in this format:

Sales by Quarter Q1: 9965 Q2: 7403

As you code this event handler and the other event handlers for this HW, try to use FOR loops to do as much of the processing as possible.

Add an event handler for the click event of the Show Sales By Region button. This handler should display the results as shown above.

Add an event handler for the Show Total Sales button. This handler should display the total sales in a single line like this:

Total sales: 39907

Just need to know what the sales.js should have added to it to achieve the 3 needed results (by quarter, by region, and total). As per directions use FOR loops whenever possible. Below is the sales.js that we start with.

var r1 = [1540, 1130, 1580, 1105];

var r2 = [2010, 1168, 2305, 4102];

var r3 = [2450, 1847, 2710, 2391];

var r4 = [1845, 1491, 1284, 1575];

var r5 = [2120, 1767, 1599, 3888];

var textDisplay;

var $ = function (id) {

return document.getElementById(id);

}

function salesQuarter(item, index) {

show_quarter.innerHTML = (r1[0= + r2[0] + r3[0] + r4[0]);

}

window.onload = function () {

}

Thank you in advance.