I'm having a difficult time getting this to work. I pretty much have the HTML able to display. I'm new to Javascript, I don't know how to make it work. Specifically the quantity multiplier, adding the total column, and getting the results of these functions to display in the elements. Please help!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td><select name="merch1" id="merch1" oninput="calcPrice('1')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td><input type="number" min="0" name="quantity1" id="quantity1" oninupt="multiplyQuantity('1')"></td>
<td><input type="text" name="calculated1" id="calculated1" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total1"></td>
</tr>
<br>
<tr>
<td><select name="merch2" id="merch2" oninput="calcPrice('2')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity2" id="quantity2" oninupt="multiplyQuantity('2')"></td>
<td><input type="text" name="calculated2" id="calculated2" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total2"></td>
</tr>
<br>
<tr>
<td><select name="merch3" id="merch3" oninput="calcPrice('3')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity3" id="quantity3" oninupt="multiplyQuantity('3')"></td>
<td><input type="text" name="calculated3" id="calculated3" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total3"></td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right"><strong>Total:</strong></td>
<td><input type="text" name="total" id="total" disabled></td></tr>
</table>
<br>
<b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calPrice(x){
var item = document.getElementById("merch"+i).value;
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
}
document.getElementById("price"+i).value = price;
}
function multiplyQuantity(){
var "calculated"+y = price * document.getElementById("quantity"+y).value;
document.getElementById("total"+y).value = calculated;
}
function findTotal(){
var arr = document.getElementsByName('pretotal')
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
There are a some bugs in your code (naming of variables and functions that don't match) and there is a much better way to do this then what you're doing now but as to not complicate matters more I just fixed the bugs.
Here is your working code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td>
<select name="merch1" id="merch1" oninput="calcPrice('1')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity1" id="quantity1" onchange="calcPrice('1')">
</td>
<td>
<input type="text" name="calculated1" id="calculated1" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total1">
</td>
</tr>
<br>
<tr>
<td>
<select name="merch2" id="merch2" oninput="calcPrice('2')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity2" id="quantity2" onchange="calcPrice('2')">
</td>
<td>
<input type="text" name="calculated2" id="calculated2" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total2">
</td>
</tr>
<br>
<tr>
<td>
<select name="merch3" id="merch3" oninput="calcPrice('3')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity3" id="quantity3" onchange="calcPrice('3')">
</td>
<td>
<input type="text" name="calculated3" id="calculated3" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total3">
</td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right">
<strong>Total:</strong>
</td>
<td>
<input type="text" name="total" id="total" disabled>
</td>
</tr>
</table>
<br>
<b>
Comment:
</b>
<br>
<textarea rows="4" cols="50"></textarea>
<br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calcPrice(x){
var item = document.getElementById("merch"+x).value;
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
}
multiplyQuantity(price,x);
findTotal();
}
function multiplyQuantity(price,index){
var calculated = price * document.getElementById("quantity"+index).value;
document.getElementById("total"+index).value = calculated;
document.getElementById("calculated"+index).value = price;
}
function findTotal(){
var total = [1,2,3]
//get total values
.map(x=>document.getElementById("total"+x).value||"0")
//convert to number
.map(x=>x*1)
//sum of numbers
.reduce(
(acc,item)=>acc+item
,0
);
document.getElementById('total').value = total;
}
</script>
</body>
</html>
I made a few changes. I changed 'oninput' to 'onchange' on all the elements. Also changed variable names.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td><select name="merch1" id="merch1" onchange="calPrice('1');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td><input type="number" min="0" name="quantity1" id="quantity1" onchange="multiplyQuantity('1');"></td>
<td><input type="text" name="price1" id="price1" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total1"></td>
</tr>
<br>
<tr>
<td><select name="merch2" id="merch2" oninput="calPrice('2');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity2" id="quantity2" onchange="multiplyQuantity('2');"></td>
<td><input type="text" name="price2" id="price2" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total2"></td>
</tr>
<br>
<tr>
<td><select name="merch3" id="merch3" oninput="calPrice('3');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity3" id="quantity3" onchange="multiplyQuantity('3');"></td>
<td><input type="text" name="price3" id="price3" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total3"></td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right"><strong>Total:</strong></td>
<td><input type="text" name="total" id="total" disabled></td></tr>
</table>
<br>
<b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calPrice(x){
var item = document.getElementById("merch"+x).value;
console.log(item);
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
default:
price = 0;
break;
}
console.log(price);
document.getElementById("price"+x).value = price;
var qty = document.getElementById("quantity"+x).value;
if(!qty) {
document.getElementById("quantity"+x).value = 1;
}
multiplyQuantity(x);
}
function multiplyQuantity(x){
var price = document.getElementById("price"+x).value;
var qty = document.getElementById("quantity"+x).value;
document.getElementById("total"+x).value = price * qty;
findTotal();
}
function findTotal(){
var arr = document.getElementsByName('pretotal');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
Related
I need to sum all the subtotals I got into a grand total. This is for an assignment that I need to submit in about 2 weeks. Here's my JS file:
function calculate_Total() {
for (i=1; i<=5; i++) {
const idName = "price_" + i;
const price = parseFloat(document.getElementById(idName).value);
const idQty= "qty_" + i;
const qty = parseFloat(document.getElementById(idQty).value);
const total = price*qty;
const idTotal = "total_" + i;
document.getElementById(idTotal).value = total.toFixed(2);
}
for (i=1; i<=5; i++) {
document.getElementById("grand_total").value = 0;
}
}
I want to do that when I click a button to calculate the grand total price. Here's the HTML file that shows the button just near the end of the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
<script src="JS/book-order.js"></script>
<script></script>
</head>
<body>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label></th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" onchange="calculate_Total()" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_2" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_2" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_2" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_3" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="qty" id="qty_3" min="0" value="0" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="total" id="total_3" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_4" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_4" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_4" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_5" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_5" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_5" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()" /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="discount()">View Price After 10% discount</button>
<button onclick="calculate_Total();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
<script src="js/book-order.js"></script>
</body>
</html>
How do I sum the sub-totals into a grand total? Any help would be appreciated, thank you.
After you correctly calculated all subtotals (first for loop) you assigned the values to a series of html elements (the ones with ID total_1, total_2, total_3, total_4, total_5).
That allows you to iterete them in your second for loop, accumulating the value of each subtotal to a grandTotal variable.
After the loop is over, you can assign the result to the html element with ID grand_total.
function calculate_Total() {
for (i=1; i<=5; i++) {
const idName = "price_" + i;
const price = parseFloat(document.getElementById(idName).value);
const idQty= "qty_" + i;
const qty = parseFloat(document.getElementById(idQty).value);
const total = price*qty;
const idTotal = "total_" + i;
document.getElementById(idTotal).value = total.toFixed(2);
}
let grandTotal = 0
for (i=1; i<=5; i++) {
grandTotal += parseFloat(document.getElementById("total_" + i).value)
}
document.getElementById("grand_total").value = grandTotal;
}
i cant get 0 on grand total when i enter the amount all in positive values then change the unit price all to negative values. but it works when i dont enter the positive value and only entering negative values into it. HELP ME GET THAT 0 PLEASE----------------------------------
This is my html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css">
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type = "text"></td>
<td><input type ="text"class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book1_price" placeholder = "0.00"></td>
<td><input type ="number" name = "Quantity" id="book1_quan" placeholder = "0"></td>
<td><input type ="number" name = "theProduct" id ="book1_total" class = "total" value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book2_price" placeholder = "0.00" ></td>
<td><input type ="number" name = "Quantity" id= "book2_quan" placeholder = "0"></td>
<td><input type ="number" name = "total" id="book2_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "numnber" name = "unit price" id="book3_price" placeholder = "0.00"></td>
<td><input type ="number" name = "Quantity" id="book3_quan" placeholder = "0"></td>
<td><input type ="number" name = "total" id="book3_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book4_price" placeholder = "0.00"></td>
<td><input type ="number" name = "Quantity" id="book4_quan" placeholder = "0"></td>
<td><input type ="number" name = "total" id="book4_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type = "text" class="center"></td>
<td><input type = "text" class="center"></td>
<td><select name = "type">
<option value = "Choose"disabled>Choose a Category...</option>
<option value = "Business">Business</option>
<option value = "Fiction">Fiction</option>
<option value = "Mathematics">Mathematics</option>
<option value = "Technology">Technology</option>
</select></td>
<td><input type = "number" name = "unit price" id="book5_price" placeholder = "0.00" min="0"></td>
<td><input type ="number" name = "Quantity" id="book5_quan"placeholder = "0"></td>
<td><input type ="number" name = "total" id="book5_total" class = "total"value = "0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan = "5"><input type = "Submit" id = "click" onclick = "calculateTotal()" value = "Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan = "2"><input type = "number" name = "total" class= "total" id="grandtotal" value = "0.00" style = "width: 300px; height: 40px; font-weight: bolder; font-size: larger;"disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id ="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
</body>
this is my javascript:
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i<= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value = (document.getElementById("book" + i + "_price").value / 1).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal = parseFloat(total1.value) + parseFloat(total2.value) + parseFloat(total3.value)
+ parseFloat(total4.value) + parseFloat(total5.value);
//error
if(fulltotal < 0) {
alert("An error has occurred: Please enter a positive value.");
document.getElementById("grandtotal")[0].value = 0;
fulltotal = 0
}
grandtotal.value = fulltotal.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal(){
var value = document.getElementById("grandtotal").value;
if(value > 250){
document.getElementById("button").style.display ="block";
} else {
document.getElementById('button').style.display ="none";
}
}
function newGrandTotal(){
var total = document.getElementById("grandtotal").value;
var newtotal = total-(total / 10);
alert("New grand total is :" + newtotal.toFixed(2));
}
I don't exactly know what you mean but I think you need to make an if() statement.
Like this:
if(newtotal < 0){
newtotal = 0;
}
Atleast i think you just don't want to go negative on the total. So when the newtotal is negative make it 0. If im getting you wrong let me know!
I comment this line document.getElementById("grandtotal")[0].value = 0; and it works.
You don't need to assign a value to grandtotal here because you only assign the grandtotal in the end of the function based on the value of the fulltotal.
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i <= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value = (
document.getElementById("book" + i + "_price").value / 1
).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal =
parseFloat(total1.value) +
parseFloat(total2.value) +
parseFloat(total3.value) +
parseFloat(total4.value) +
parseFloat(total5.value);
//error
if (fulltotal < 0) {
alert("An error has occurred: Please enter a positive value.");
// document.getElementById("grandtotal")[0].value = 0;
fulltotal = 0;
}
grandtotal.value = fulltotal.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
} else {
document.getElementById("button").style.display = "none";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - total / 10;
alert("New grand total is :" + newtotal.toFixed(2));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css" />
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book1_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book1_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="theProduct"
id="book1_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book2_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book2_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book2_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="numnber"
name="unit price"
id="book3_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book3_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book3_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book4_price"
placeholder="0.00"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book4_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book4_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center" /></td>
<td><input type="text" class="center" /></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td>
<input
type="number"
name="unit price"
id="book5_price"
placeholder="0.00"
min="0"
/>
</td>
<td>
<input
type="number"
name="Quantity"
id="book5_quan"
placeholder="0"
/>
</td>
<td>
<input
type="number"
name="total"
id="book5_total"
class="total"
value="0.00"
disabled
/>
</td>
</tr>
<tr id="footer">
<td colspan="5">
<input
type="Submit"
id="click"
onclick="calculateTotal()"
value="Calculated Grand Total Price"
style="font-size: 18px"
/>
</td>
<td colspan="2">
<input
type="number"
name="total"
class="total"
id="grandtotal"
value="0.00"
style="
width: 300px;
height: 40px;
font-weight: bolder;
font-size: larger;
"
disabled
/>
</td>
</tr>
</table>
<br />
<input
style="display: none"
type="button"
id="button"
class="btn"
value="Discount 10%"
onclick="newGrandTotal()"
/>
<br />
<br />
Go back to home
<br />
</body>
<script src="test.js"></script>
</html>
You could address the right element withou using an index.
Beside this, you could take a function for getting the products of all rows to prevent writing more code than necessary to get a row total.
Finally exit the function on error.
(In a next step, I would suggest to duplicate the data as array and use this values instead if retrieving data from input. Onyl changes of input should change the array for final total with discount.)
function calculateTotal() {
function calculateRow(row) {
const
price = document.getElementById(`${row}_price`),
quantity = document.getElementById(`${row}_quan`),
total = document.getElementById(`${row}_total`),
product = price.value * quantity.value;
price.value = (+price.value).toFixed(2);
total.value = product.toFixed(2);
return product;
}
const NumberOfBooks = 5;
let total = 0;
for (let i = 1; i <= NumberOfBooks; ++i) {
total += calculateRow(`book${i}`);
}
// grandtotal
var grandtotal = document.getElementById("grandtotal");
if (total < 0) {
alert("An error has occurred: Please enter a positive value.");
grandtotal.value = '0.00';
return;
}
grandtotal.value = total.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
} else {
document.getElementById('button').style.display = "none";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("New grand total is :" + newtotal.toFixed(2));
}
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00" min="0"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5"><input type="Submit" id="click" onclick="calculateTotal()" value="Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan="2"><input type="number" name="total" class="total" id="grandtotal" value="0.00" style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;" disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
Question: If the calculated grand total is a negative value, set it to zero instead. If the calculated grand total is a negative value, set it to zero instead. Additionally, the
user should be alerted that an error has occurred. You may use the appropriate medium
(i.e., prompt box, paragraph text under the table, etc.) to carry out this function.
I'm trying to do this in my code but seems like it is not working right. When grand total is lesser than 0 it should display zero on the grand total input box.
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css">
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5">
<input
type="Submit"
id="click"
onclick="calculateTotal()"
value="Calculated Grand Total Price"
style="font-size: 18px;"
>
</td>
<td colspan="2">
<input
type="number"
name="total"
class="total"
id="grandtotal"
value="0.00"
style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;"
disabled
/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
</body>
</html>
This is my javascript:
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i <= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value =
(document.getElementById("book" + i + "_price").value / 1).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal = parseFloat(total1.value) + parseFloat(total2.value) + parseFloat(total3.value) +
parseFloat(total4.value) + parseFloat(total5.value);
grandtotal.value = fulltotal.toFixed(2);
//error
if (fulltotal < 0) {
alert("An error has occurred : Please enter positive values only.");
document.getElementById("grandtotal")[0].value = 0;
}
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("new grand total is :" + newtotal.toFixed(2));
}
if I am getting this right, you don't need Unit Price to be less than 0 ever.
Which is pretty easy to handle using HTML.
add the min=0 attribute on the input tags
<input type = "number" name = "unit price" id="book5_price" placeholder = "0.00" min=0>
Use the Math.max function - it will return the largest of the two (either the total if it is bigger than 0, or 0 - if the total is negative)
total = Math.max(0, total);
There were numerous little errors, like anytime you get a value from an input element it will always be text, so to add it you need to convert to a number. In the code below you'll see + right before element.value items - that little + is actually a shorthand notation to tell JS to treat that as a number. I also saw you wanted to do a loop, which was a good idea, so I show how to do that.
function calculateTotal() {
const NumberOfBooks = 5;
let sum_total = 0;
let grandtotal = document.getElementById("grandtotal");
for (let i = 1; i <= NumberOfBooks; ++i) {
let bprice = "book" + i + "_price",
bquan = "book" + i + "_quan",
btotal = "book" + i + "_total";
let item_price = +document.getElementById(bprice).value
let item_quantity = +document.getElementById(bquan).value
let total = (item_price * item_quantity).toFixed(2);
document.getElementById(btotal).value = total
sum_total += +total;
}
if (sum_total < 0) {
alert("An error has occurred : Please enter positive values only.");
}
sum_total = Math.max(0, sum_total);
grandtotal.value = sum_total.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = +document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
}
}
// not sure what this function is for
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("new grand total is :" + newtotal.toFixed(2));
}
<h1>Book Ordering System</h1>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5"><input type="Submit" id="click" onclick="calculateTotal()" value="Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan="2"><input type="number" name="total" class="total" id="grandtotal" value="0.00" style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;" disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
How do I make this statement repeat a few times? I tried and it works for only the first row but the rest of the row cannot be executed.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
body{
background-image: linear-gradient(to right,#FF7F50,#008080);
}
thead,
tfoot {
background-color: skyblue;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input,
tbody td:nth-child(7) input {
text-align: right;
}
tr:hover {
background-color: yellow;
}
td:last-of-type input {
background-color: silver;
}
tfoot,
tfoot input {
text-align: right;
}
tfoot td:last-of-type input {
font-size: 18pt;
}
table{
border-style: dashed;
border-width: medium;
border-color: #EEE8AA;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input{
background-color: tomato;
}
tbody td:nth-child(2) input{
background-color: #00FF7F;
}
tbody td:nth-child(3) input{
background-color: #EE82EE;
}
tbody td > select{
background-color: #FFA500;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<form method="post">
<table border="2">
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<input type="button" onclick="multiply();" value="Calculate Grand Total Price">
</td>
<td colspan="2">
<input type="text" name="grandTotal" id="grandTotal" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec6" id="sec6" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec7" id="sec7" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec8" id="sec8" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec9" id="sec9" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec10" id="sec10" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec11" id="sec11" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec12" id="sec12" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec13" id="sec13" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec14" id="sec14" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec15" id="sec15" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec16" id="sec16" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec17" id="sec17" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec18" id="sec18" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec19" id="sec19" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec20" id="sec20" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec21" id="sec21" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec22" id="sec22" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec23" id="sec23" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec24" id="sec24" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec25" id="sec25" value="0.00" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function multiply(){
let num1 = document.getElementById("sec3").value ;
let num2 = document.getElementById("sec4").value ;
document.getElementById("sec5").value = num1 * num2;
num1 = document.getElementById("sec8").value ;
num2 = document.getElementById("sec9").value ;
document.getElementById("sec10").value = num1 * num2;
num1 = document.getElementById("sec13").value ;
num2 = document.getElementById("sec14").value ;
document.getElementById("sec15").value = num1 * num2;
num1 = document.getElementById("sec18").value ;
num2 = document.getElementById("sec19").value ;
document.getElementById("sec20").value = num1 * num2;
num1 = document.getElementById("sec23").value ;
num2 = document.getElementById("sec24").value ;
document.getElementById("sec25").value = num1 * num2;
total = document.getElementById("sec5").value + document.getElementById("sec10").value + document.getElementById("sec15").value
+ document.getElementById("sec20").value + document.getElementById("sec25").value ;
document.getElementById("grandTotal").value = total;
}
</script>
</body>
</html>
How do I make this statement repeat a few times? I tried and it works for only the first row but the rest of the row cannot be executed. It only functions in the 1st row
i suggest you applying a reload button
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
try replacing your code with this:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Ordering System</title>
<style>
body{
background-image: linear-gradient(to right,#FF7F50,#008080);
}
thead,
tfoot {
background-color: skyblue;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input,
tbody td:nth-child(7) input {
text-align: right;
}
tr:hover {
background-color: yellow;
}
td:last-of-type input {
background-color: silver;
}
tfoot,
tfoot input {
text-align: right;
}
tfoot td:last-of-type input {
font-size: 18pt;
}
table{
border-style: dashed;
border-width: medium;
border-color: #EEE8AA;
}
tbody td:nth-child(5) input,
tbody td:nth-child(6) input{
background-color: tomato;
}
tbody td:nth-child(2) input{
background-color: #00FF7F;
}
tbody td:nth-child(3) input{
background-color: #EE82EE;
}
tbody td > select{
background-color: #FFA500;
}
</style>
</head>
<body>
<h1>Book Ordering System</h1>
<form method="post">
<table border="2">
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<input type="button" onclick="multiply();" value="Calculate Grand Total Price">
</td>
<td colspan="2">
<input type="text" name="grandTotal" id="grandTotal" value="0.00" readonly="readonly">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec1" id="sec1" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec2" id="sec2" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec3" id="sec3" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec4" id="sec4" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec5" id="sec5" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec6" id="sec6" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec7" id="sec7" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec8" id="sec8" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec9" id="sec9" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec10" id="sec10" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec11" id="sec11" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec12" id="sec12" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec13" id="sec13" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec14" id="sec14" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec15" id="sec15" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec16" id="sec16" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec17" id="sec17" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec18" id="sec18" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec19" id="sec19" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec20" id="sec20" value="0.00" readonly="readonly" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<label for="sec1"></label>
<input type="text" name="sec21" id="sec21" value="" />
</td>
<td>
<label for="sec2"></label>
<input type="text" name="sec22" id="sec22" value="" />
</td>
<td>
<select name="category" id="category">
<option value="choose">Please choose the category...</option>
<option value="biz">Business</option>
<option value="fiction">Fiction</option>
<option value="maths">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td>
<label for="sec3"></label>
<input type="text" name="sec23" id="sec23" value="0.00" />
</td>
<td>
<label for="sec4"></label>
<input type="text" name="sec24" id="sec24" value="0" />
</td>
<td>
<label for="sec5"></label>
<input type="text" name="sec25" id="sec25" value="0.00" readonly="readonly" />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function multiply(){
let total = 0;
let num1 = document.getElementById("sec3").value ;
let num2 = document.getElementById("sec4").value ;
document.getElementById("sec5").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec8").value ;
num2 = document.getElementById("sec9").value ;
document.getElementById("sec10").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec13").value ;
num2 = document.getElementById("sec14").value ;
document.getElementById("sec15").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec18").value ;
num2 = document.getElementById("sec19").value ;
document.getElementById("sec20").value = num1 * num2;
total += (num1 * num2);
num1 = document.getElementById("sec23").value ;
num2 = document.getElementById("sec24").value ;
document.getElementById("sec25").value = num1 * num2;
total += (num1 * num2);
document.getElementById("grandTotal").value = total;
}
</script>
</body>
</html>
EDIT: this should work by now
May the question will be difficult for explaining and understanding too.
I have a table which has some rows and button of add row.
Table rows contain input field, having specific name.
For eg.: I have two rows, the first row has name="qty1" then the second row is having name="qty2". And for adding the third row, there is button add row.
So, now the third row will be added.
The name of input in the third row should be name="qty3", but it is only name="qty".
I tried:
$(document).ready(function(){
$(".add-row").click(function(){
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty" value="" placeholder="Quantity"></td></tr>';
$("table").append(markup);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr>
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</table>
<input type="button" class="add-row" value="Add Row">
</form>
So, my question is how to increase the numbers as per rows?
Use a counter as name and increment it in each click:
Update: Use insertBefore() method to add the rows before the submit button.
I reccomend you take a look on DOM insertion outside and DOM insertion inside methods.
$(document).ready(function() {
var cont = 3
$(".add-row").click(function() {
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + cont + '" value="" placeholder="Quantity"></td></tr>';
$(markup).insertBefore($('button[type="submit"]').closest("tr"));
cont++;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr>
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</table>
<input type="button" class="add-row" value="Add Row">
</form>
Count children of table tbody with .children().length() to get the next number
var nextNumber = $("#chiru_inv tbody").children().length - 2;
Working jsfiddle
You can also consider learning technologies that are superior to jquery in these kinds of tasks, such as React.js, Angular, Vue.js
When the page loads, get the number of inputs that already exist. Then when you add new input, always increase that number and add it to the input's name qty + the number of existing inputs.
$(document).ready(function(){
var elCount = $("form table input[name^='qty']").length;
$(".add-row").click(function(){
elCount++;
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + elCount + '" value="" placeholder="Quantity"></td></tr>';
$("table").append(markup);
});
});
Ok so I would suggest you flag your rows in the table by adding a class in your markup (in my example qtyRow):
var markup = '<tr class="qtyRow"><td><input type="text" name="item"
value="" placeholder="Item"></td><td><select class="country"
name="what"><option value="Select Part">Select Part</option><option
value="1">Part 1</option><option value="2">Part 2</option><option
value="3">Part 3</option><option value="4">Part 4</option><option
value="5">Part 5</option></select></td><td><input type="text"
name="qty" value="" placeholder="Quantity"></td></tr>';
In your example there are two rows by default. These should also have the qtyRow class.
You can get the amoutn of rows by this and add 1 for the new qtyRow:
var number = $("tr.qtyRow").length + 1;
Now you need to change name="qty" to name="qtyn" where is the new number from the codeline above. Inside your $(".add-row").click() listener you need to add after the declaration of markup:
var number = $("tr.qtyRow").length + 1;
markup = markup.peplace('name="qty"', 'name="qty' + number + '"');
Please let me know if this works for you :)
It would be better to have a specified CSS class for input row and using that following could be one of the solution:
// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');
// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);
HTML table tag also requires a fix:
<table>
<tbody>
<!-- data rows goes here -->
</tbody>
<tfoot>
<!-- save button row goes here-->
</tfoot>
</table>
$(document).ready(function() {
$(".add-row").click(function() {
var markup = '<tr class="inputRow"><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty" value="" placeholder="Quantity"></td></tr>';
$("table > tbody").append(markup);
// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');
// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tbody>
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr class="inputRow">
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr class="inputRow">
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</tfoot>
</table>
<input type="button" class="add-row" value="Add Row">
</form>