I need help with looping the javascript in a do/while statement loop.
The problems I am having is that I don't want to display the incorrect information in my table when entering an invalid product, but it does display in the document.write. I need help in order to make sure that the incorrect information won't be displayed.
Also, when I hit "ok" to add more to my order, it doesn't loop it but merely displays the document.write. I want it to loop if you hit the "ok" button.
Thank you for the help.
Here is the code:
<html>
<head><title>Javascript Assignment 3: Daniel Weiner</title>
</head>
<body bgcolor="brown">
<h1 align="center">Big Ben's Burgers-eCommerce</h1>
<table border="1" width="100%" height="450px" bgcolor="gray"><tr>
<th align="center">Product/Service</th>
<th align="center">Price</th>
<th align="center">Discount</th>
</tr>
<tr bgcolor="orange">
<td align="center"><font size="3">Hamburger
<br>
<br>
Classic Hamburger
<td align="right" bgcolor="orange"><font size="3">$8.00</font></td>
<td align="center" bgcolor="orange"><font size="3">.10</font></td>
</tr>
<tr bgcolor="orange">
<td align="center"><font size="3">Cheeseburger
<br>
<br>
Classic Cheeseburger
</font></td>
<td align="right" bgcolor="orange"><font size="3">$9.00</font></td>
<td align="center" bgcolor="orange"><font size="3">.05</font></td>
</tr>
<tr bgcolor="orange">
<td align="center"><font size="3">Soda
<br>
<br>
Fabulous Drinks
</font></td>
<td align="right" bgcolor="orange"><font size="3">$2.00
</font></td>
<td align="center" bgcolor="orange"><font size="3"> .07</font></td>
</tr>
<tr bgcolor="red">
<td align="center"><font size="3"> French Fries
<br>
<br>
Fries
</font></td>
<td align="right" bgcolor="red"><font size="3"> $4.00</font></td>
<td align="center" bgcolor="red"><font size="3">.15</font></td>
</table>
<script type="text/javascript">
/*Daniel Weiner, Fengpeng Yuan, Javascript 2, Nov 4,2011*/
var username;
var bprice= 8;
var chprice= 9;
var sprice= 2;
var fprice= 4;
var price= 0;
var a;
var b;
var product= "hamburger, cheeseburger, soda, fries";
var quantity =0;
var total;
var cost = 0;
var discount= 0;
do{
username =prompt("Welcome to Big Ben's Burgers. Please enter your name.", "");
alert("Hello " + username+". Please look through our available products and services before placing your order.","");
product=prompt("What do you want?","");
quantity =1*prompt("How many of " +product+ " would you like?");
if (product == "hamburger")
{
price = bprice;
discount = .1;
}
else if (product == "cheeseburger")
{
price = chprice;
discount = .05;
}
else if (product == "soda")
{
price = sprice;
discount = .07;
}
else if (product == "fries")
{
price = fprice;
discount = .15;
}
else{
alert("Sorry, " +username+ " Your item not found.");
}
cost=price*quantity
discount=price*discount*quantity
total=cost-discount
document.write("The cost of buying " +quantity+ " of " +product+ " is $" +cost+ ".<br/>");
document.write("This discount for this purchase is $" +discount+ ".<br/>");
}while(a==false)
a = confirm("Do you want to place another order?");
(b==false)
document.write("Thank you for placing an order with us, " +username+ ".<br/>");
document.write("The total order cost is $" +total+ ".");
</script>
</body>
</html>
for the second part of the question, you have to use the statement bellow in the loop
a = confirm("Do you want to place another order?");
You're re-iterating the loop if the user hits cancel. Change while(a==false) to while(a==true) or simply while(a)
Also put the line
a = confirm("Do you want to place another order?");
as the last line in your loop, instead of the line after.
You can set a flag var that lets you know if the item was found or not and check it at the end of your loop to avoid displaying data for non-existing items:
<script type="text/javascript">
/*Daniel Weiner, Fengpeng Yuan, Javascript 2, Nov 4,2011*/
var username;
var bprice= 8;
var chprice= 9;
var sprice= 2;
var fprice= 4;
var price= 0;
var a;
var b;
var product= "hamburger, cheeseburger, soda, fries";
var quantity =0;
var total;
var cost = 0;
var discount= 0;
var flag;
do{
flag = true; //assume found unless otherwise
username =prompt("Welcome to Big Ben's Burgers. Please enter your name.", "");
alert("Hello " + username+". Please look through our available products and services before placing your order.","");
product=prompt("What do you want?","");
quantity =1*prompt("How many of " +product+ " would you like?");
if (product == "hamburger")
{
price = bprice;
discount = .1;
}
else if (product == "cheeseburger")
{
price = chprice;
discount = .05;
}
else if (product == "soda")
{
price = sprice;
discount = .07;
}
else if (product == "fries")
{
price = fprice;
discount = .15;
}
else{
alert("Sorry, " +username+ " Your item not found.");
flag = false;
}
if(flag){
cost=price*quantity
discount=price*discount*quantity
total=cost-discount
document.write("The cost of buying " +quantity+ " of " +product+ " is $" +cost+ ".<br/>");
document.write("This discount for this purchase is $" +discount+ ".<br/>");
}
a = confirm("Do you want to place another order?");
}while(a);
alert('goodbye');
</script>
It looks like you aren't conditioning the part that outputs the result on whether or not a valid product was selected. You need something like the following;
do{
....
productValid = false;
if (product == "hamburger")
{
price = bprice;
discount = .1;
productValid = true;
}
else if (product == "cheeseburger")
{
price = chprice;
discount = .05;
productValid = true;
}
else if (product == "soda")
{
price = sprice;
discount = .07;
productValid = true;
}
else if (product == "fries")
{
price = fprice;
discount = .15;
productValid = true;
}
else{
alert("Sorry, " +username+ " Your item not found.");
}
if(productValid){
cost=price*quantity
discount=price*discount*quantity
total=cost-discount
document.write("The cost of buying " +quantity+ " of " +product+ " is $" +cost+ ".<br/>");
document.write("This discount for this purchase is $" +discount+ ".<br/>");
}
else
{
document.write("No valid product selected<br>");
}
a = confirm("Do you want to place another order?");
}while(a==true)
Related
I am trying to make a game with JavaScript but I am stuck. I cannot figure out how to take the rolls from the dice and put it into a table to count how many rolls were made before the player runs out of money, and the other 3 requirements at the end of the rules::::: any advice would be super helpful!
The rules
As long as there is money, play the game.
Each round, the program rolls a virtual pair of dice for the user.
If the sum of the 2 dice is equal to 7, the player wins $4
otherwise, the player loses $1.
The program asks the user how many dollars they have to bet.
If the starting bet is less than or equal to 0, display an error message.
When the user clicks the Play button, the program then rolls the dice repeatedly until all the money is gone.
Hint: Use a loop construct to keep playing until the money is gone.
Hint: We created a rollDice() function in the Rolling Dice exercise.
The program keeps track of how many rolls were taken before the money ran out.
The program keeps track of the maximum amount of money held by the player.
The program keeps track of how many rolls were taken at the point when the user held the most money.
I couldn't get my code to paste properly so I've added a snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Lucky Sevens </title>
<style>
</style>
<script>
<!--reset form field to natural state-->
function clearErrors() {
for (var loopCounter = 0;
loopCounter < document.forms["bet"].elements.length;
loopCounter++) {
if (document.forms["bet"].elements[loopCounter]
.parentElement.className.indexOf("has-") != -1) {
document.forms["bet"].elements[loopCounter]
.parentElement.className = "form-group";
}
}
}
<!--clear form fields-->
function resetForm() {
clearErrors();
document.forms["bet"]["num1"].value = "";
document.getElementById("results").style.display = "none";
document.getElementById("submitButton").innerText = "Submit";
document.forms["bet"]["num1"].focus();
alert("You have reset the form and will lose all progress.");
}
<!--verify user input is expected-->
function validateItems() {
clearErrors();
var num1 = document.forms["bet"]["num1"].value;
if (num1 == "" || isNaN(num1)) {
alert("Num1 must be filled in with a number.");
document.forms["bet"]["num1"]
.parentElement.className = "form-group has-error";
document.forms["bet"]["num1"].focus();
return false;
}
if (num1 >= 11) {
alert("Bet must be between $1-$10");
document.forms["bet"]["num1"]
.parentElement.className = "form-group has-error"
document.forms["bet"]["num1"].focus();
return false;
}
if (num1 <= 0) {
alert("Bet must be between $1-$10");
document.forms["bet"]["num1"]
.parentElement.className = "form-group has-error"
document.forms["bet"]["num1"].focus();
return false;
}
document.getElementById("results").style.display = "block";
document.getElementById("submitButton").innerText = "Roll Again";
document.getElementById("startingBet").innerText = num1;
return false;
}
function rollDice() {
var die1 = document.getElementById("die1");
var die2 = document.getElementById("die2");
var status = document.getElementById("status");
var d1=Math.floor(Math.random() * 6) + 1;
var d2=Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
die1.innerHTML = d1;
die2.innerHTML = d2;
status.innerHTML = "You rolled " + diceTotal + ".";
if(diceTotal == 7) {
status.innerHTML += " You win $4!";
}
if(diceTotal != 7){
status.innerHTML += " You lose $1.";
}
}
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Lucky Sevens</h1>
<form name="bet" onsubmit="return validateItems();"
onreset="resetForm();" class="form-inline">
<div class="form-group">
<label for="num1">Starting Bet</label>
<input type="number" class="form-control" id="num1">
</div>
<button type="submit" onclick="rollDice()" id="submitButton" class="btn btn-default">Submit</button>
</form>
<h2 id="status" style="clear:left;"></h2>
<div id="die1" class="dice">0</div>
<div id="die2" class="dice">0</div>
<hr />
<table id="results" class="table table-striped" style="display:none;">
<tbody>
<tr>
<td>Starting Bet</td>
<td><span id="startingBet"></span></td>
</tr>
<tr>
<td>Total Rolls Before Going Broke</td>
</tr>
<tr>
<td>Highest Amount Won</td>
</tr>
<tr>
<td>Roll Count at Highest Amount Win</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am creating a grading system with a perfect score of 100. The total is automatically calculated depending the score provided and it is read only. Now, I want to show another text box a short remarks based on the total without the submit button. For example, if the grade is 90 and below, the remarks should automatically be set to 'Very Good' and if less than or equal to 80, the remarks will be "Good".
function findTotal(){
var arr = document.getElementsByName('qty');
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;
}
function calculate() {
var feedback = document.getElementById("total").value;
var greeting;
if (feedback >= 90) {
greeting = "OUTSTANDING";
} else if (feedback >= 80) {
greeting = "VERY GOOD";
} else if (feedback >= 70) {
greeting = "GOOD";
} else {
greeting = "Needs Improvement";
}
document.getElementById("feedback").value = greeting;
}
<div class="column3 tworow" style="background-color:#bbb;" align="center">
<table id="t01">
<tr>
<td>SCORE: <input type="text" name="total" id="total" style="text-align:center;font-size:20px" onkeyup="calculate()" readonly></td>
</tr>
<tr>
<td>FEEDBACK: <input type="text" name="feedback" id="feedback" style="text-align:center;font-size:20px" readonly></td>
</tr>
</table>
</div>
I tried to use different if/else statement with JavaScript but it is not picking up the elseif function.
Your code needed a lot of cleaning, there were for example 2 <th> nested tags I don't know why, here is a working flexible example, just insert the number and press calculate
function calculate() {
var feedback = document.getElementById("total").value;
var greeting;
if (feedback >= 90) {
greeting = "OUTSTANDING";
} else if (feedback >= 80) {
greeting = "VERY GOOD";
} else if (feedback >= 70) {
greeting = "GOOD";
} else {
greeting = "Needs Improvement";
}
document.getElementById("feedback").value = greeting;
}
<table class="column3 tworow" style="background-color:#bbb;" align="center">
<tr>
<th>TOTAL: <input type="text" name="total" id="total" style="text-align:center;font-size:20px"></th>
</tr>
<tr>
<th>FEEDBACK: <input type="text" name="feedback" id="feedback" style="text-align:center;font-size:20px"
readonly></th>
</th>
</tr>
</table>
<br>
<button onclick="calculate()">Calculate</button>
Also there were a lot of javascript errors, as noted by #Snel23
If you want to remove the Calculate button and make the feedback show whenever you insert something in the input field, just do this:
Remove the <button> tag
Add your <input onkeyup="calculate()"> to the <input> tag
Here is a snippet for that:
function calculate() {
var feedback = document.getElementById("total").value;
var greeting;
if (feedback >= 90) {
greeting = "OUTSTANDING";
} else if (feedback >= 80) {
greeting = "VERY GOOD";
} else if (feedback >= 70) {
greeting = "GOOD";
} else {
greeting = "Needs Improvement";
}
document.getElementById("feedback").value = greeting;
}
<table class="column3 tworow" style="background-color:#bbb;" align="center">
<tr>
<th>TOTAL: <input type="text" name="total" id="total" style="text-align:center;font-size:20px" onkeyup="calculate()"></th>
</tr>
<tr>
<th>FEEDBACK: <input type="text" name="feedback" id="feedback" style="text-align:center;font-size:20px"
readonly></th>
</th>
</tr>
</table>
First of all, in your if else statements, you started by comparing feedback but changed to time. Secondly, you were trying to insert html into an element that didn't exist, rather than set the value on <input id="feedback">
Finally, you were trying to set that value to text which is a variable that doesn't exist.
The below JS code should fix your issues:
var feedback = document.getElementById("total").value;
if (feedback >= 90) {
greeting = "OUTSTANDING";
} else if (feedback >=80) {
greeting = "VERY GOOD";
} else if (feedback >=70) {
greeting = "GOOD";
} else {
greeting = "Needs Improvement";
}
document.getElementById("feedback").value = greeting;
I want to have a addition of two sum of function to get a overall total. but in return they are just combine in one or the results return NAN.
//function for display
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("₱" ,"") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("₱" +price);
update_total();
update_balance();
update_ftotal();
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("₱" ,"");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html("₱" +total);
//$('#total').html("₱"+total);
}
function update_balance() {
var tax = $("#subtotal").html().replace("₱" ,"") * (0.12);
tax = roundNumber(tax,2);
$('.tax').html("₱" +tax);
}
function update_ftotal() {
var sub , ax = 0;
var sub = $("#subtotal").html();
var ax = $('.tax').html();
var due = sub + ax
// due = roundNumber(due,2);
$('.due').html(due);
}
here's the frontend where i use the class and id in the function
<tr>
<td colspan="3" class="blank"> </td>
<td colspan="3" class="total-line">Subtotal:</td>
<td class="total-value"><div id="subtotal" name="subtotal"></div></td>
</tr>
<tr>
<td colspan="3" class="blank"> </td>
<td colspan="3" class="total-line">12% Tax:</td>
<td class="total-value"><div class="tax" id="tax"></div></td>
</tr>
<tr>
<td colspan="3" class="blank"> </td> <!-- add tax result to the subtotal to get final total -->
<td colspan="3" class="total-line balance">Total:</td>
<td class="total-value balance"><div class="due" id="due"></div></td>
</tr>
the result
enter image description here
sub and ax are strings, thus the plus operator concatenates them.
Try this:
var due = parseFloat(sub) + parseFloat(ax);
The answer.
function update_ftotal() {
var sub , ax = 0;
var sub = $(".subtotal").html();
var ax = $(".tax").html();
var num1 = Number(sub);
var num2 = Number(ax);
var due = num1 + num2;
due = roundNumber(due,2);
$('.due').html(due);
}
I need to compare two HTML tables' rows assuming that data in first cell can be duplicated but data in second cell is always unique. I need to find whether first cell AND second cell in table1 is the same as data in first cell AND second cell in table2 for instance:
Table1:
<Table>
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>0</td>
<td>312</td>
</tr>
<tr>
<td>123</td>
<td>323331</td>
</tr>
</Table>
Second table:
<table>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>545</td>
<td>3122</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
</table>
The result of this should be:
123 321 - good, do nothing
545 345 - good, do nothing
545 3122 - wrong its not in table1 <-
Here's what I've got so far...
$('#runCheck').click(function(){
var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');
$(secondTable).each(function(index){
var $row = $(this);
var secTableCellZero = $row.find('td')[0].innerHTML;
var secTableCellOne = $row.find('td')[1].innerHTML;
$(firstTable).each(function(indexT){
if ($(this).find('td')[0].innerHTML === secTableCellZero){
if ($(this).find('td')[1].innerHTML !== secTableCellOne){
$('#thirdDiv').append("first: " + secTableCellZero + " second: " + secTableCellOne+"<br>");
}
}
});
});
});
Where am I going it wrong?
Just to clarify once again:
2nd table says :
row1 - john|likesCookies
row2 - peter|likesOranges
1st table says :
row1 - john|likesNothing
row2 - john|likesCookies
row3 - steward|likesToTalk
row4 - peter|likesApples
now it should say :
john - value okay
peter - value fail.
a lot alike =VLOOKUP in excel
Check this working fiddle : here
I've created two arrays which store values in each row of tables 1 and 2 as strings. Then I just compare these two arrays and see if each value in array1 has a match in array 2 using a flag variable.
Snippet :
$(document).ready(function() {
var table_one = [];
var table_two = [];
$("#one tr").each(function() {
var temp_string = "";
count = 1;
$(this).find("td").each(function() {
if (count == 2) {
temp_string += "/";
}
temp_string = temp_string + $(this).text();
count++;
});
table_one.push(temp_string);
});
$("#two tr").each(function() {
var temp_string = "";
count = 1;
$(this).find("td").each(function() {
if (count == 2) {
temp_string += "/";
temp_string = temp_string + $(this).text();
} else {
temp_string = temp_string + $(this).text();
}
count++;
});
table_two.push(temp_string);
});
var message = "";
for (i = 0; i < table_two.length; i++) {
var flag = 0;
var temp = 0;
table_two_entry = table_two[i].split("/");
table_two_cell_one = table_two_entry[0];
table_two_cell_two = table_two_entry[1];
for (j = 0; j < table_one.length; j++) {
table_one_entry = table_one[j].split("/");
table_one_cell_one = table_one_entry[0];
table_one_cell_two = table_one_entry[1];
console.log("1)" + table_one_cell_one + ":" + table_one_cell_two);
if (table_two_cell_one == table_one_cell_one) {
flag++;
if (table_one_cell_two == table_two_cell_two) {
flag++;
break;
} else {
temp = table_one_cell_two;
}
} else {}
}
if (flag == 2) {
message += table_two_cell_one + " " + table_two_cell_two + " found in first table<br>";
} else if (flag == 1) {
message += table_two_cell_one + " bad - first table has " + temp + "<br>";
} else if (flag == 0) {
message += table_two_cell_one + " not found in first table<br>";
}
}
$('#message').html(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="one">
<tr>
<td>123</td>
<td>321</td>
</tr>
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>0</td>
<td>312</td>
</tr>
<tr>
<td>123</td>
<td>323331</td>
</tr>
</table>
<hr>
<table id="two">
<tr>
<td>545</td>
<td>345</td>
</tr>
<tr>
<td>545</td>
<td>3122</td>
</tr>
<tr>
<td>123</td>
<td>321</td>
</tr>
</table>
<hr>
<div id="message">
</div>
</div>
If I understand your requirements, it would be easier to read the first table and store the couples as strings: 123/321, 545/345, etc...
Than you can read the second table and remove from the first list all the rows found in both.
What remains in the list are couples that do not match.
From purely an efficiency standpoint if you loop through the first table just once and create an object using the first cell value as keys and an array of values for second cells, you won't have to loop through that table numerous times
this then makes the lookup simpler also
var firstTable = $('#firstDiv table tr');
var secondTable = $('#secDiv table tr');
var firstTableData = {}
firstTable.each(function() {
var $tds = $(this).find('td'),
firstCellData = $tds.eq(0).html().trim(),
secondCellData == $tds.eq(1).html().trim();
if (!firstTableData[firstCellData]) {
firstTableData[firstCellData] = []
}
firstTableData[firstCellData].push(secondCellData)
})
$(secondTable).each(function(index) {
var $tds = $(this).find('td');
var secTableCellZero = $tds.eq(0).html().trim();
var secTableCellOne = $tds.eq(1).html().trim();
if (!firstTableData.hasOwnProperty(secTableCellZero)) {
console.log('No match for first cell')
} else if (!firstTableData[secTableCellZero].indexOf(secTableCellOne) == -1) {
console.log('No match for second cell')
}
});
I'm not sure what objective is when matches aren't found
Hello I am trying to get this program to add ALL of the total costs that accumulate throughout this loop. But the program keeps printing the most recent cost rather than all of the products that have been "purchased". Here is my code: `
var Customer_Name, Discount, Product="", Price, Quantity="", Cost ;
var blanket_price = 25;
var lotion_price = 60;
var surfboard_price = 60;
var sunscreen_price = 60;
var Customer_Name = prompt("Welcome to Jersey Shore Inc.! What is your name?","Type Name Here");
alert("Hello "+Customer_Name+", Please look through all available products and services before placing your order.");
do
{
Product= prompt("What product would you like?","Type Product Name Here");
Quantity= prompt("How much of the "+Product+" would you like?","Type Quantity Here");
var Total_Cost;
var SumOrderTotal=0;
if (Product == "blanket")
{
alert("You received a 50% discount! Click okay to see your receipt below.");
Total_Cost= 0.5*(Quantity*blanket_price);
Cost=(Quantity*blanket_price);
Discount = .50*blanket_price;
}
else if (Product == "lotion")
{
alert("You received a 50% discount! Click okay to see your receipt below.");
Total_Cost= 0.5*(Quantity*lotion_price);
Cost=(Quantity*lotion_price);
Discount = .50*lotion_price;
}
else if (Product == "surfboard")
{
alert("You received a 50% discount!Click okay to see your receipt below.");
Total_Cost= 0.5*(Quantity*surfboard_price);
Cost=(Quantity*surfboard_price);
Discount = .50*surfboard_price;
}
else if (Product == "sunscreen")
{
alert("You received a 50% discount! Click okay to see your receipt below.");
Total_Cost= 0.5*(Quantity*sunscreen_price);
Cost=(Quantity*sunscreen_price);
Discount = .50*sunscreen_price;
}
if((Product=="blanket" || Product=="sunscreen" || Product=="lotion" || Product=="surfboard"))
{
document.write("The cost of buying " + Quantity+ " of " + Product + " is $ "+ Cost +". </br>");
document.write("The discount for this purchase is $ "+Total_Cost+". <br/>");
}
else
{
alert("Sorry "+Customer_Name+" you entered an invalid product.(Refer to table for our products) Please Refresh the page to reload and place a new order.");
}
var SumOrderTotal = Total_Cost + SumOrderTotal;
var user_answer=confirm("Would you like to continue purchasing products?");
}
while(user_answer==true);
document.write("Thank you for placing an order with us, " +Customer_Name+". <br/>");
document.write("Your total order cost is $"+ SumOrderTotal+ ". <br/>");
`
move SumOrderTotal outside of do...while.
Like so:
var SumOrderTotal=0;
do {
Product = prompt("...");
Quantity = prompt("...");
var Total_Cost;
} while (...) {
...
}
Because you are initializing to 0 each time you start the cycle(do..while).