I previously posted a code with the similar way and I am still having problems with it. this time I get 100.0712.5 when I put 10 as the bill, 7 for the sales tax and 25 for the tip. I am really new to Javascript coding and I have literally been spending hours trying to figure this out I need help.
<html>
<head>
<script type="text/javascript">
function applyTax(){
var inputAmount = document.getElementById( 'dollars' ).value;
var salesTax = document.getElementById( 'tax' ).value;
var tip = document.getElementById( 'tip' ).value;
var totalAmount = (salesTax/100) + (inputAmount);
var tipprcnt = (tip/100) * (inputAmount);
var Grandtotal = (inputAmount + (totalAmount*1) + (tipprcnt*1));
//document.getElementById( 'requestedAmount' ).innerHTML = tipprcnt;
//document.getElementById( 'requestedTax' ).innerHTML = totalAmount;
document.getElementById( 'requestedGrand' ).innerHTML = Grandtotal;
}
</script>
</head>
<body>
<h1>Sales Tax + Tip Calculator</h1>
<p>Type in your price (dollar amount). Click the "Calculate" button to receive your total.
</p>
<p>
What is the bill amount?: $<input type="text" id="dollars" /> <br>
What is the sales tax?:<input type="text" id="tax" />%<br>
how much do you want to tip?:<input type="text" id="tip" />%
<input type="button" onclick="applyTax();" value="Calculate" />
</p>
</h2>The Grand Total is:</h2>
<div id="requestedAmount"> </div>
<div id="requestedTax"> </div>
<div id="requestedGrand"> </div>
<p>Home
</body>
</html>
You were adding them as string, use parseFloat instead
http://plnkr.co/edit/6pN2Ug5qxcOSUjE5AnhJ?p=preview
function applyTax(){
var inputAmount = parseFloat(document.getElementById( 'dollars' ).value);
var salesTax = parseFloat(document.getElementById( 'tax' ).value);
var tip = parseFloat(document.getElementById( 'tip' ).value);
var taxprcnt = (salesTax/100) * (inputAmount);
var tipprcnt = (tip/100) * (inputAmount);
var Grandtotal = inputAmount + taxprcnt + tipprcnt;
document.getElementById( 'requestedGrand' ).innerHTML = Grandtotal.toFixed(2); // Round to 2 decimals
}
You should use parseFloat() to convert the inputs to numbers.
You need to multiply the input amount by the tax percentage, not add them.
You should round off the final result, because people don't want to see fractional pennies.
DEMO
When I enter $10 amount, 7% tax, 25% tip, the total is $13.20.
Use Number(input.value) by every input to convert the string values into numbers. You can use parseInt() or parseFloat instead of Number() if you want. The first converts to integer, the second converts to numbers with decimal points.
Btw forget the overusage of () and *1, it is just noise for others...
Your variable names are confusing, but I guess you wanted something like this:
var amountInput = document.getElementById("dollars");
var taxInput = document.getElementById("tax");
var tipInput = document.getElementById("tip");
var amount = Number(amountInput.value);
var taxPercent = Number(taxInput.value);
var tipPercent = Number(tipInput.value);
var grandTotal = Math.round(amount * (100 + taxPercent + tipPercent)) / 100;
var grandTotalOutput = document.getElementById("requestedGrand");
grandTotalOutput.innerHTML = grandTotal;
Related
I'm not sure how to add tax (7%) to my cost ($6) under Javascript. Can anyone help me?
html
<div class="item main">
<h1>Enter a Title</h1>
<p>Please enter a title to calculate how much it will cost<br>
<input id = "titleBox" type = "text">
<button onclick="calculateCost()">Enter</button>
</p>
<p id= "output">Result</p>
</div>
Javascript
var titleName;
var cost = 6;
function calculateCost() {
titleName = document.getElementById("titleBox").value;
var titleLetters;
titleLetters = titleName.length;
var spaceCount = (titleName.split(" ").length - 1);
document.getElementById("output").innerHTML = "$" + (titleLetters - spaceCount) * cost;
/* "Red Car" "Red" "Car" */
}
It is pretty basic(just simple math), here is the implementation:
var titleName;
var cost = 6;
const tax = 7/100; // Added the tax
function calculateCost() {
titleName = document.getElementById("titleBox").value;
var titleLetters;
titleLetters = titleName.length;
var spaceCount = (titleName.split(" ").length - 1);
document.getElementById("output").innerHTML = "$" + ((titleLetters - spaceCount) * cost*(1+tax)); // Since we have to add tax we have to use 1+tax
/* "Red Car" "Red" "Car" */
}
Note: scroll to the right to see the upgraded fromula since it got out of the stack overflow code box
I just want to get the square root of total2 .. but it won't appear in the selected box ..
here is the javascript codes.
i'll comment the html codes.
function myFunction() {
var q1 = document.getElementById("qinput1").value;
var q2 = document.getElementById("qinput2").value;
var q3 = document.getElementById("qinput3").value;
var total = parseInt(q1) + parseInt(q2) + parseInt(q3);
document.getElementById("ainput3").value=total;
var a1 = document.getElementById("ainput1").value;
var a2 = document.getElementById("ainput2").value;
//from the total we got, lets assign it a variable for further calculation
var a3 = document.getElementById("ainput3").value=total;
var total2 = parseInt(a1)*parseInt(a2)/ parseInt(a3);
document.getElementById("ansA").value = total2;
var total3 = math.sqrt(parseInt(total2));
document.getElementById("sqaureD").value = total3;
}
function myShapes() {
document.getElementById('squareA').style.display =
document.getElementById('shapes').value == 'Square' ? 'block' : 'none'
}
<form action="" id="fcalculation">
<fieldset>
<legend>Calculation of qu</legend>
<label><i>Ultimate bearing capacity</i> <b>(qu) = </b></label>
<input id="qinput1" type="text" placeholder="c'NcFcsFcdFci"/> +
<input id="qinput2" type="text" placeholder="qNqFqsFqdFqi"/> +
<input id="qinput3" type="text" placeholder="½βγNFγsFγdFγi"/>
</fieldset>
</form>
it seems that the calculation part at the very end is not working. sorry its my first time to code.
Classname is Math not math
Try replacing
var total3 = math.sqrt(parseInt(total2,10));
with
var total3 = Math.sqrt(parseInt(total2,10));
Also, looking at your markup, there are no fields with id ainput1, ainput2 and ainput3.
Hello I am trying to figure out what is wrong with my code I input $10.00 for the bill and 7 for the sales tax, and 25 for the tip. the answer should be 13.38 but for some reason i get 12.59. I am not sure where the coding went wrong?
function applyTax(){
var inputAmount = document.getElementById( 'dollars' ).value;
var salesTax = document.getElementById( 'tax' ).value;
var tip = document.getElementById( 'tip' ).value;
var totalAmount = (inputAmount*1) + (salesTax * 0.01);
var tipprcnt = (tip*0.01)*totalAmount;
var Grandtotal = ((totalAmount*1) + (tipprcnt*1)).toFixed(2);
document.getElementById( 'requestedGrand' ).innerHTML = Grandtotal;
}
It seems you're assuming you should pay tax on a tip, which wouldn't normally be the case.
If you're tipping $2.50 on a $10 bill, you'd pay $12.50. Adding a 7% tax on that would give you $13.38, which is incorrect.
What you probably want to be doing is taxing the $10, and adding a $2.50 tip to that.
Sub-Total: $10
Tax: $0.70 (7%)
Tip: $2.50 (25% of Sub-Total)
Or, in JavaScript:
var inputAmount = 10;
var tip = 0.25;
var salesTax = 0.07;
var totalAmount = inputAmount +
(inputAmount * tip) + // Add on the tip
(inputAmount * salesTax); // Add on the tax
I'm using this form script to automatically calculate totals. Now I need to get that total and print it.
Here is my code.
function myFunction()
{
var x = document.getElementById("frm1");
var txt1 =x.elements[0].value;
var txt2 =x.elements[1].value;
var total =txt1+txt2;
document.getElementById("demo").innerHTML="total is :"+total;
}
<body>
<form id="frm1">
First value : <input type="text" name="first"><br>
Second Value : <input type="text" name="second"><br>
</form>
<p id="demo"></p>
<button onclick="myFunction()"> ADD </button>
</body>
It doesn't really say, but I'm guessing you're talking about numbers, if so parse the string values as numbers before you add them up
function myFunction() {
var x = document.getElementById("frm1");
var txt1 = parseFloat( x.elements[0].value );
var txt2 = parseFloat( x.elements[1].value );
var total = txt1 + txt2;
document.getElementById("demo").innerHTML = "total is :"+total;
}
FIDDLE
I have a form which outputs a calculation from an input field and a drop down.
The script is fine apart from the grand total. When you type in a figure and select a value from the drop down, the grand total is rounded to 2 decimal places in the html.
Can anyone see why this is happening?
The form is below:
<input type="text" name="amount" id="amount" maxlength="6" autocomplete="off"/><span class="paymentalert" style="color:red;"></span>
<br /><br />
<label for="delivery">Delivery:</label>
<select id="delivery" name="delivery">
<option value="1.50">Fast</option>
<option value="2.50">Medium</option>
<option value="3.50">Slow</option>
</select>
The javascript is below:
function updateCost()
{
var amount = parseFloat($('#amount').val()).toFixed(2);
var delivery = parseFloat($('#delivery').val()).toFixed(2);
var total = parseFloat(amount) + parseFloat(delivery);
$("#total").html(total);
$("#amountdiv").html(amount);
$("#deliverydiv").html(delivery);
var fixedrate = parseFloat(total / 100 * 8.2).toFixed(2);
var grandtotal = parseFloat(fixedrate) + parseFloat(total);
$("#grandtotal").html(grandtotal);
$("#total").html(total);
$("#fixedrate").html(fixedrate);
}
$(document).ready(function(){
$('#amount').change(function(){ updateCost(); });
$('#delivery').change(function(){ updateCost(); });
$('#grandtotal').change(function(){ updateCost(); });
});
toFixed(2) should only be used in the part of the code that outputs it. In this case, you should have constructs like $("#someID").html(total.toFixed(2)), and remove the extra parseFloat()s. Something like this:
function updateCost() {
var amount = parseFloat(document.getElementById("amount").value),
delivery = parseFloat(document.getElementById("delivery").value),
total = amount + delivery,
fixedrate = total / 100 * 8.2,
grandtotal = fixedrate + total;
document.getElementById("total").innerHTML = total.toFixed(2);
document.getElementById("amountdiv").innerHTML = amount.toFixed(2);
document.getElementById("deliverydiv").innerHTML = delivery.toFixed(2);
document.getElementById("grandtotal").innerHTML = grandtotal.toFixed(2);
document.getElementById("fixedrate").innerHTML = fixedrate.toFixed(2);
}
$(function(){
document.getElementById("amount").onchange =
document.getElementById("delivery").onchange = updateCost;
});