Question

In: Computer Science

I'm trying to create a javascript order form that outputs the items/cost/quantity in the form of...

I'm trying to create a javascript order form that outputs the items/cost/quantity in the form of a table. I have to use a for loop to accomplish this, but I'm not sure where to place the loop & what it needs to reference

<!DOCTYPE html>
<head>
<meta charset="utf-8" />

<style media="screen">

div{
background-color: #f7df3e;
border: 1px solid black;
padding: 10px;
margin: 30px;
}
h1{
text-align: center;
}

</style>

<script type="text/javascript">

var items = [];
var quans = [];
var costs = [];
total = 0;
text = "";

function insert(){
items.push(document.getElementById('item').value);
quans.push(document.getElementById('cost').value);
costs.push(document.getElementById('quantity').value);
document.getElementById("demo1").innerHTML = "The WHOLE array: "+items.toString();
document.getElementById("demo2").innerHTML = "The WHOLE array: "+costs.toString();
document.getElementById("demo3").innerHTML = "The WHOLE array: "+quans.toString();
displayReceipt();
}


function displayReceipt(){
total = 0;
text="";
   text="==============================================";
   text+="<br /><h2>Mini-Mart Receipt: Maura </h2>";
   text+="<ul>";
for (var i = 0; i < items.length; i++) {
       text += "<li>" + itemsArray[i] +"</li>";

}


   text += "</ul>";
   document.getElementById("demo2").innerHTML = text;
}


function checkout(){
displayReceipt();
document.getElementById("demo").innerHTML = text;
}


</script>
</head>

<body>

<div>


<h1>>Mini-Mart<</h1>

<p > Enter your <strong>Item, Cost, and Quantity</strong> information.<br>
Submit the item by clicking on <strong>Add to Cart</strong>.<br>
Click on the <strong>Checkout</strong> button when done entering items. </p>

<form onsubmit = "checkout()">
<input id="item" type="text" size="40" placeholder="Item"><br><br>
<input id = "cost" type = "number" size = "20" placeholder="Cost"><br><br>
<input id="quantity" type="number" size="20" placeholder="Quantity"><br><br><br>
<input type="reset" value="Add to Cart" onclick="insert()">
<input type="submit" value="Checkout" onclick="checkout()">
</form>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>


</div>
</body>
</html>

Solutions

Expert Solution

HTML File :

<!DOCTYPE html>

<head>

   <meta charset="utf-8" />

   <!-- style is used for internal stylesheet -->

    <style media="screen">

        /* style rule for div */

       div {

            background-color: #f7df3e;

            border: 1px solid black;

            padding: 10px;

            margin: 30px;

        }

        /* style rule for h1 */

        h1 {

            text-align: center;

        }

    </style>

</head>

<body>

    <div>

        <h1>Mini-Mart</h1>

                <p> Enter your <strong>Item, Cost, and Quantity</strong> information.<br>

                    Submit the item by clicking on <strong>Add to Cart</strong>.<br>

                    Click on the <strong>Checkout</strong> button when done entering items. </p>

                <form>

                    <input id="item" type="text" size="40" placeholder="Item"><br><br>

                    <input id="cost" type="number" size="20" placeholder="Cost"><br><br>

                    <input id="quantity" type="number" size="20" placeholder="Quantity"><br><br><br>

                    <input type="reset" value="Add to Cart" onclick="insert()">

                    <input type="button" value="Checkout" onclick="checkout()">

                </form>

                <p id="demo1"></p>

                <p id="demo2"></p>

                <p id="demo3"></p>

    </div>

     <!-- sdript is used for javascript -->

     <script type="text/javascript">

        //declaring array that stores items , quantity and cost

            var items = [];

            var quans = [];

            var costs = [];

            total = 0;//declaring variable to store total

            text = "";

            //function insert

            function insert() {

                items.push(document.getElementById('item').value);

                quans.push(document.getElementById('cost').value);

                costs.push(document.getElementById('quantity').value);

                //declarin variable to create table

                var table="<table border=1><tr><th>Item</th><th>Cost</th><th>Quantity</th></tr>";

                //using for loop

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

                {

                    //creating row in the table

                    table+="<tr><td>"+items[i]+"</td><td>"+costs[i]+"</td><td>"+quans[i]+"</td></tr>";

                }

                //close table

                table+="</table>";

                document.getElementById("demo1").innerHTML =table;

            }

            //function display receipt    

            function displayReceipt() {

                total = 0;

                text = "";

                text = "==============================================";

                text += "<br /><h2>Mini-Mart Receipt: Maura </h2>";

                text += "<table border=1><tr><th>Item</th><th>Cost</th><th>Quantity</th><th>ItemCost</th></tr>";

                    //using for loop

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

                    total=total+costs[i]*quans[i];//store all items total

                    //create row

                    text += "<tr><td>"+items[i]+"</td><td>"+costs[i]+"</td><td>"+quans[i]+"</td><td>"+costs[i]*quans[i]+"</td></tr>";

    

                }     

                text+="<tr><th colspan=3>Total Cost </th><th>"+total.toFixed(2)+"</th></tr>";  

                text += "</table>";//close table

                //display table

                document.getElementById("demo2").innerHTML = text;

            }

            //function checkout()

    

            function checkout() {

                displayReceipt();//call function

            }

    

        </script>

</body>

</html>

===========================================

Screen showing order form :

Screen when some item is added to the cart :

Screen when checkout button is clicked :

venereology answered 1 year ago
Next > < Previous

Related Solutions

Javascript array of objects: I'm trying to get the input into an array of objects, and...
Javascript array of objects: I'm trying to get the input into an array of objects, and then display the information in a table using a for loop, but I don't think my path is right <!DOCTYPE html> <head> <title>Form</title> <meta charset="utf-8" /> <style media="screen"> h1 { text-align: center; } div { background-color: #pink; border: 2px solid green; padding: 15px; margin: 65px; } </style> <script> var list = []; total = 0; text = ""; function Product(item, quantity, costs){ this.item =...
Create a JavaScript function that will collect the information from the form and verify that it...
Create a JavaScript function that will collect the information from the form and verify that it is the correct type and that there are no blank textboxes. Save and test the file to ensure that the textbox information is collected and the script is working correctly. Use the onclick event within the submit button to call this function. Output validation error messages by writing directly to the with the id of "results." (You may want to use alert boxes for...
Do for javascript. Create a form with the following inputs. L -> Loan Amount in $'s,...
Do for javascript. Create a form with the following inputs. L -> Loan Amount in $'s, i -> Interest Rate %/year, n -> Number of Compounding Periods months Given the following formula to solve for the monthly payments mp = ( i * (1+i)^n * L ) / ( (1+i)^n - 1 ) Output the results L = $, i = %/month , n = months mp = $ And a table which lists the remaining loan amount and interest...
I'm trying to create a function determines the range of outliers in an array using pass...
I'm trying to create a function determines the range of outliers in an array using pass by reference. I need to write a function that outputs the +3 and -3 standard deviation. I'm having a hard time figuring out what I should identify as my pointers and how to use the pass by reference. This is what I have so far: #include <stdio.h> #define ARRAY_SIZE 20 double homeworkArray[ARRAY_SIZE] = { 1.3, 5.7, 2.1, -1.2, 0.5, 4.3, 2.1, 50.2, 3.4, 1.1,...
Using Javascript Create a page places an order for a Calzone: Using Text box to get...
Using Javascript Create a page places an order for a Calzone: Using Text box to get customers Name Radio Buttons for sizes: small, medium, large list for type of crust: crispy, soft, hard check boxes for toppings, with at least 3 to be selected Submit button that displays the order information.
Java I'm trying to create a program that replicates a theater ticket reservation system. I have...
Java I'm trying to create a program that replicates a theater ticket reservation system. I have a Seat class with members row(integer), seat(character) and ticketType(character). Where a ticket type can be 'A' adult, 'C' child, 'S' senior, or '.' recorded as empty. I have a Node generic class that points to other nodes(members): up, Down. Left, Right. It also has a generic payload. Lastly, I have an Auditorium class which is also generic. its member is a First Node<T>. As...
​(EOQ calculations​) A downtown bookstore is trying to determine the optimal order quantity for a popular...
​(EOQ calculations​) A downtown bookstore is trying to determine the optimal order quantity for a popular novel just printed in paperback. The store feels that the book will sell at four times its hardback figures. It​ would, therefore, sell approximately 4 comma 0004,000 copies in the next year at a price of​ $1.50. The store buys the book at a wholesale figure of​ $1. Costs for carrying the book are estimated at ​$0.250.25 a copy per​ year, and it costs...
(EOQ calculations​) A downtown bookstore is trying to determine the optimal order quantity for a popular...
(EOQ calculations​) A downtown bookstore is trying to determine the optimal order quantity for a popular novel just printed in paperback. The store feels that the book will sell at four times its hardback figures. It​ would, therefore, sell approximately 3 comma 000 copies in the next year at a price of​ $1.50. The store buys the book at a wholesale figure of​ $1. Costs for carrying the book are estimated at ​$0.30 a copy per​ year, and it costs...
A downtown bookstore is trying to determine the optimal order quantity for a popular novel just...
A downtown bookstore is trying to determine the optimal order quantity for a popular novel just printed in paperback. The store feels that the book will sell at four times its hardback figures. It would,therefore, sell approximately 6,000 copies in the next year at a price of $1.50. The store buys the book at a wholesale figure of $1. Costs for carrying the book are estimated at $0.15 a copy per year, and it costs $25 to order more books....
Production quantity and the total cost of production are given in the form of a table....
Production quantity and the total cost of production are given in the form of a table. Production quantity (100 tons) 42 16 48 50 30 12 18 28 Total cost (1000 of Rs.) 22 10 14 20 14 8 12 16 Determine the total cost production for (i) 2500 tons (ii) 4500 tons If the total production cost is Rs. 50,000, then how many quantities were produced?
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT