ZuoTi.Pro
Question

In an external JavaScript file, you need to create two global variables for the Quarter name...

  1. In an external JavaScript file, you need to create two global variables for the Quarter name array and the Sales amount array.
  2. Create an anonymous function and connect it to the onclick event of the Add to Array button that adds the values from the fields (Quarter and Sales) to the respective arrays.
  3. Create an anonymous function and connect it to the onclick event of Display Sales button displays the contents of the arrays, displays the sum of all the sales entered, and display the average quarterly sales (total/number of quarters).

Here is the code I have. Can you help?

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>My Annual Sales</title>

    <link rel="stylesheet" href="styles.css" />

    <script></script>

</head>

<body>

<main>

    <h1>Enter your quarterly Sales</h1>

    

    <label for="name">Quarter:</label>

    <input type="text" id="name"><br>

        

    <label for="score">Sales:</label>

    <input type="text" id="sales"><br>

    

    <label>&nbsp;</label>

    <input type="button" id="add" value="Add to Array" >

    <input type="button" id="display_sales" value="Display Sales" ><br>

    

    <textarea id="sales_display"></textarea>

</main>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Javascript Code -

//add event listner on load

        function load() {

            document.getElementById("add").addEventListener("click", addToArray);

            document.getElementById("display_sales").addEventListener("click", displaySale);

        }

        //variable array declare

        var Quarter = [];

        var Sales = [];

        //addToArray add value to array

        var addToArray = function () {

            //get the value

            var name = document.getElementById("name").value;

            var sale = parseInt(document.getElementById("sales").value);

            //add to the array

            Quarter.push(name);

            Sales.push(sale);

            

            var name = document.getElementById("name").value = "";

            var sale = document.getElementById("sales").value = "";

        }

        //function displaySale display sum of sale and average

        var displaySale = function () {

            var sum = 0;

            

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

                sum+=Sales[i];

            }

            var avg = sum / Sales.length;

            document.getElementById("sales_display").value = "Sum of all sale is "+ sum+". Average quaterly sale is "+avg;

        }

HTML Code -

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>My Annual Sales</title>

    <link rel="stylesheet" href="styles.css" />

    <script>

    </script>

</head>

<body onload=load()>

    <main>

        <h1>Enter your quarterly Sales</h1>



        <label for="name">Quarter:</label>

        <input type="text" id="name"><br>



        <label for="score">Sales:</label>

        <input type="text" id="sales"><br>



        <label>&nbsp;</label>

        <input type="button" id="add" value="Add to Array">

        <input type="button" id="display_sales" value="Display Sales"><br>



        <textarea id="sales_display"></textarea>

    </main>

</body>

</html>

Screenshots -

0 0
Add a comment
Know the answer?
Add Answer to:
In an external JavaScript file, you need to create two global variables for the Quarter name...
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. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...

    Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1.      Open the HTML and JavaScript files below: 2.      In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

  • Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

    Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file and save it as nnLab8.htm. 3. Add the following HTML to the file: <!DOCTYPE HTML> <html> <head> <title>Hello World - jQuery Style</title> </head> <body> <div id="first"></div> <div id="second"></div> <a href="#" id="link">Click Me!</a><br /> <span id="greeting"></span> </body> </html> 4. Add the following<script> element to the<head> section. NOTE: Use the jQuery version number that matches the file name of the file you downloaded in Step 1....

  • Modify this code to store the form elements as variables and display them on the page...

    Modify this code to store the form elements as variables and display them on the page in an HTML table. <!DOCTYPE html> <html> <head> <script> function getValues() {     var result = ""; result += "First Name: " + document.forms["myForm"]["fname"].value + "<br>"; result += "Last Name: " + document.forms["myForm"]["lname"].value + "<br>"; result += "Address: " + document.forms["myForm"]["address"].value + "<br>"; result += "City: " + document.forms["myForm"]["city"].value + "<br>"; result += "State: " + document.forms["myForm"]["state"].value + "<br>"; document.getElementById("output").innerHTML = result; } </script>...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • Please I need help to create a website, using HTML5, that connects to Microsoft SQL Server...

    Please I need help to create a website, using HTML5, that connects to Microsoft SQL Server This what I came up with but I don’t know how to get it to connect to my server? Please help <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>Untitled Page</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>     <script>     $(document).ready(function(){         $("#Button1").click(function(){         var database = openDatabase($("#Text1").val(), "1.0", "Contact Manager", 200000);                  });       });     </script> </head> <body> <span>Enter DataBase Name: <input id="Text1" type="text" /></span> <span> <input...

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT