Question

In: Computer Science

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" />

h1 {
text-align: center;
}

div {
background-color: #pink;
border: 2px solid green;
padding: 15px;
margin: 65px;
}

</style>

function Product(item, quantity, costs){
this.item = item;
this.quantity = quantity;
this.cost = cost;
}

function insert() {
list.push(new Product(document.getElementById('productItem').value,
document.getElementById('productQuantity').value),
document.getElementById('productCost').value);

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

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

{
table+="<tr><td>"+list[i].item+"</td><td>"+list[i].cost+"</td><td>"+list[i].quantity+"</td><td>"+list[i].cost*list[i].quantity+"</td></tr>";
}

table+="</table>";
document.getElementById("demo1").innerHTML =table;
}

function displayReceipt() {
total = 0;
text = "";
text = "==============================================";
text += "<br /><h2>your order</h2>";
text += "<table><tr><th>Item</th><th>Cost</th><th>Quantity</th><th>Total</th></tr>";

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

total+=list[i].cost*list[i].quantity;
text += "<tr><td>"+list[i].item+"</td><td>"+list[i].cost+"</td><td>"+list[i].quantity+"</td><td>"+list[i].cost*list[i].quantity+"</td></tr>";
}

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

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

function checkout() {

displayReceipt();
}

</script>
</head>

<body>
<div>
<h1>market</h1>

<
<form>

Item: <input id="item" name="productItem" type="text" placeholder="Item"><br><br>
Cost: <input id="productCost" name="productCost" type="number" placeholder="Cost"><br><br>
Quantity: <input id="productQuantity" name="productQuantity" 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>

</div>

</body>
</html>

Solutions

Expert Solution

Short Summary:

You almost got the code correct. have correcred the syntax and logic errors

**************Please upvote the answer and appreciate our time.************

Source Code:

<!DOCTYPE html>

h1 {
text-align: center;
}

div {
background-color: #pink;
border: 2px solid green;
padding: 15px;
margin: 65px;
}

</style>

function Product(item, quantity, cost){
this.item = item;
this.quantity = quantity;
this.cost = cost;
}

function insert() {
list.push(new Product(document.getElementById('productItem').value,
parseInt(document.getElementById('productQuantity').value),
parseFloat(document.getElementById('productCost').value)));

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

for(var i=0;i<list.length;i++){
table+="<tr><td>"+list[i].item+"</td><td>"+list[i].cost+"</td><td>"+list[i].quantity+"</td><td>"+list[i].cost*list[i].quantity+"</td></tr>";
}

table+="</table>";
document.getElementById("demo1").innerHTML =table;
}

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

total+=list[i].cost*list[i].quantity;
text += "<tr><td>"+list[i].item+"</td><td>"+list[i].cost+"</td><td>"+list[i].quantity+"</td><td>"+list[i].cost*list[i].quantity+"</td></tr>";
}

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

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

function checkout() {

displayReceipt();
}

</script>
</head>

<body>
<div>
<h1>market</h1>

<form>

Item: <input id="productItem" name="productItem" type="text" placeholder="Item"><br><br>
Cost: <input id="productCost" name="productCost" type="number" placeholder="Cost"><br><br>
Quantity: <input id="productQuantity" name="productQuantity" 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>

</div>

</body>
</html>

**************************************************************************************

Sample Run:

**************************************************************************************

Feel free to rate the answer and comment your questions, if you have any.

Please upvote the answer and appreciate our time.

Happy Studying!!!

**************************************************************************************

venereology answered 1 year ago

Next > < Previous

Related Solutions

JAVASCRIPT Create an array of 5 objects named "movies" Each object in the movies array, should...

JAVASCRIPT Create an array of 5 objects named "movies" Each object in the movies array, should have the following properties: Movie Name Director Name Year Released WasSuccessful (this should be a boolean and at least 2 should be false) Genre Loop through all of the objects in Array If the movie is successful, display all the movie information on the page. These movies were a success: Title: Forrest Gump Year Realeased: 1994 Director: Robert Zemeckis Genre: Comedy

So, I'm trying to get an average revolutions/minute from an input vector. Here's a sample vector:...

So, I'm trying to get an average revolutions/minute from an input vector. Here's a sample vector: V=[10200 11000 11800 12300 13100 13900 14400 15020 15850 16250] The units are in ms so 10200 is 10.2 seconds. The revolutions is between every successive value. So 11000 - 10200 is 1 revolutions per 800 ms and et cetera. I need help figuring out a code that will allow me find the average cadence from the whole dataset. Thank you in advance

So, I'm trying to get revolutions/second from a given binary data. for example, the input binary...

So, I'm trying to get revolutions/second from a given binary data. for example, the input binary data is: V=[0 1 0 0 1 0 0 0 1 0 1 1 0 0 0 0 0 1 0 ] let's say the distance between each value is arbitrary (for this example, you can use 0.1). Each 1 represents a full rotation of a bike pedal, and I'm trying to calculate the pedal rate from a given binary dataset in Matlab. How...

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...

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,...

Write a JavaScript function to get the values of form containing the following input fields: fname...

Write a JavaScript function to get the values of form containing the following input fields: fname lname address city state

//Trying to get this code with JavaScript. I could partition the subarrays, but I don't know...

//Trying to get this code with JavaScript. I could partition the subarrays, but I don't know how to check for unique elements Given an array of integers check if it is possible to partition the array into some number of subsequences of length k each, such that: Each element in the array occurs in exactly one subsequence For each subsequence, all numbers are distinct. Elements in the array having the same value must be in different subsequences If it is...

I'm trying to get the union of two arrays and I tried making a loop that...

I'm trying to get the union of two arrays and I tried making a loop that does so. I tried also making the loop give me the size of the array as well from the union of the two arrays. Please check my loop to see what is wrong with it because it is not doing what I want it to do. I'm also not sure how to get the correct size of the array after the two arrays have...

Palindrome Javascript I am trying to write this javascript function to check if a number is...

Palindrome Javascript I am trying to write this javascript function to check if a number is Palindrome.. Palindrome means - a word, phrase, or sequence that reads the same backward as forward, e.g., madam or nurses run. This is the code i have, but it doesnt work. Code: let convertButton = document.getElementsByClassName("btn")[0]; let userInput = document.getElementById("number").value; let results = document.getElementById("result").value; convertButton.addEventListener("click", function (event) { event.preventDefault(); console.log(userInput); if (validatePalidrome(userInput)) document.getElementById("result").innerHTML = "true"; else document.getElementById("result").innerHTML = "false"; }); function validatePalidrome(numbers) { let...

Palindrome Javascript - NUMBERS I am trying to write this javascript function to check if a...

Palindrome Javascript - NUMBERS I am trying to write this javascript function to check if a number is Palindrome.. Palindrome means - a word, phrase, or sequence that reads the same backward as forward, e.g., 12321 This is the code i have, but it doesnt work. PLEASE MAKE SURE IT WORK BEFORE POST ANSWER, I GOT @ CODE THAT DID WORK BEFORE HTML JavaScript Palindrome Exercise rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> Palindrome Enter a positive number: Is this a palindrome? No...

Subjects