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,...
81. One of the assumptions for Economic Order Quantity (EOQ) is that items are single, with...
81. One of the assumptions for Economic Order Quantity (EOQ) is that items are single, with the ability to interact with other inventory items True False 83. Business process outsourcing is the same as outsourcing service functions. True False 85. Responsiveness of a weighted moving average time series can be changed by altering some of all the weights. True False
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.
​(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....
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT