Furthermore,I also realize that the values typed before clicking 'calculate' are disappear also.Until now I still cannot find the errors because I think my formula in calculating mortgage loan is correct.
HTML code:
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
<tr><td><input type="submit" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
</table>
</form>
</body>
</html>
JavaScript code:
function cal_mortgage()
{
var PR = form.principal.value; /*present value of the mortgage loan*/
var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = form.term.value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
form.monthly_pay.value = PAY;
}
This seems to work. But I haven't checked the mathematics:
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal" /></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest" /></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term" /></td></tr><p></p>
<tr><td><input type="button" value="calculate" onclick="cal_mortgage()" /></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay" /></td></tr>
</table>
</form>
<script>
function cal_mortgage()
{
var PR = document.getElementById("principal").value; /*present value of the mortgage loan*/
var IN = (document.getElementById("interest").value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = document.getElementById("term").value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
document.getElementById("monthly_pay").value = PAY;
}
</script>
</body>
</html>
In your html file, change <form> to <form id="Calculate"> and change button type from submit to button
In your javascript cal_mortgage() function, add this as your first line:
form = document.getElementById("Calculate")
Now it should work
NEW CODE:
function cal_mortgage()
{
form = document.getElementById('Calculate')
var PR = form.principal.value; /*present value of the mortgage loan*/
var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/
var PE = form.term.value * 12; /*number of periods of the mortgage loan*/
var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/
form.monthly_pay.value = PAY;
}
<html>
<head>
<script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
<form id="Calculate">
<table>
<h2>mortgage calculator:</h2>
<tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
<tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
<tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
<tr><td><input type="button" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
<tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
</table>
</form>
</body>
</html>
Related
I have a function that makes use of 3 inputs. Unfortunately when i fill in all 3 the inputs. The result shows up for 1 second and goes away... But when i fill in only 2 of the 3 inputs. The result will show up, but of course is missing some of the input.
<!DOCTYPE html>
<html>
<head lang="en">
<h1> BMI Calculator</h1>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<form>
<label><b>Lengte</b></label>
<input type="number" name="message" id="user_lengte" required><span>cm</span><br>
<label><b>Gewicht</b></label>
<input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
<label><b>Leeftijd</b></label>
<input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button type="submit" onclick="showBMI();" value="Calculate">Berekenen</button><br/>
<label> </label><br>
<label>Your BMI: </label>
<p><span id='display'></span></p>
</form>
</body>
</html>
function showBMI() {
var gewicht = document.getElementById("user_gewicht").value;
var lengte = document.getElementById("user_lengte").value;
var leeftijd = document.getElementById("user_leeftijd").value;
document.getElementById('display').innerHTML =
(88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)
//88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};
I would like to be able to fill in all 3 the inputs and have it displayed.
Since you have a button type as submit, the default behaviour of it is to submit the form and force refresh of the page, which you can disable by passing the event to showBMI method and using event.preventDefault();
function showBMI(e) {
e.preventDefault();
var gewicht = document.getElementById("user_gewicht").value;
var lengte = document.getElementById("user_lengte").value;
var leeftijd = document.getElementById("user_leeftijd").value;
document.getElementById('display').innerHTML =
(88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)
//88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};
<!DOCTYPE html>
<html>
<head lang="en">
<h1> BMI Calculator</h1>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<form>
<label><b>Lengte</b></label>
<input type="number" name="message" id="user_lengte" required><span>cm</span><br>
<label><b>Gewicht</b></label>
<input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
<label><b>Leeftijd</b></label>
<input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button type="submit" onclick="showBMI(event);" value="Calculate">Berekenen</button><br/>
<label> </label><br>
<label>Your BMI: </label>
<p><span id='display'></span></p>
</form>
</body>
</html>
Change button type to "button"
<button type="button" onclick="showBMI();" value="Calculate">Berekenen</button><br/>
function showBMI() {
var gewicht = document.getElementById("user_gewicht").value;
var lengte = document.getElementById("user_lengte").value;
var leeftijd = document.getElementById("user_leeftijd").value;
document.getElementById('display').innerHTML =
(88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)
//88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};
$(document).on('click', '#showBMI', function (e) {
showBMI();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head lang="en">
<h1> BMI Calculator</h1>
<meta charset="UTF-8">
</head>
<body>
<form>
<label><b>Lengte</b></label>
<input type="number" name="message" id="user_lengte" required><span>cm</span><br>
<label><b>Gewicht</b></label>
<input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
<label><b>Leeftijd</b></label>
<input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button id="showBMI" value="Calculate">Berekenen</button><br/>
<label> </label><br>
<label>Your BMI: </label>
<p><span id='display'></span></p>
</form>
</body>
</html>
function showBMI() {
var gewicht = document.getElementById("user_gewicht").value;
var lengte = document.getElementById("user_lengte").value;
var leeftijd = document.getElementById("user_leeftijd").value;
document.getElementById('display').innerHTML =
(88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)
//88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};
$(document).on('click', '#showBMI', function (e) {
showBMI();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head lang="en">
<h1> BMI Calculator</h1>
<meta charset="UTF-8">
</head>
<body>
<form>
<label><b>Lengte</b></label>
<input type="number" name="message" id="user_lengte" required><span>cm</span><br>
<label><b>Gewicht</b></label>
<input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
<label><b>Leeftijd</b></label>
<input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button id="showBMI" value="Calculate">Berekenen</button><br/>
<label> </label><br>
<label>Your BMI: </label>
<p><span id='display'></span></p>
</form>
</body>
</html>
You need to add onsubmit event to the form tag
<form onsubmit="return false">
Then it will be good to remove onclick event from submit button and call showBMI() method to onsubmit event like this:
<form onsubmit="showBMI(); return false">
Hello Stack Overflowers. I have an on going assignment in my HTML class. I currently have already created 4 simple intro pages for it but currently stuck on this very simple JavaScript calculation. I feel like I am close however. Please excuse my messy code. I am by all means of the term a "noob" at JS, but I am trying. Any help is appreciated.
My prompt is to:
"Create a page to allow the choice of an equipment from a short list and then allow selections of rental starting date and ending date and then calculate the number of days between the 2 selected dates. Finally, multiply the unit rental cost with the number of days and add 8% tax for the total cost."
My Code:
<html>
<head>
<title> Rental Program </title>
<script language="javascript">
//listbox.htm
function processit() {
string1=document.myform.numb1.value;
numb2=document.myform.alist.selectedIndex;
perweek=0;
if (string1 == 'Books') { perweek=300; }
if (string1 == 'Calculator') { perweek=200; }
if (string1 == 'Computer') { perweek=100; }
if (string1 == 'Camera') { perweek= 50; }
}
</script>
</head>
<body
<form name=myform>
<h4>Enter the item you wish to rent using the list below:
<input size =12 type="text" name="numb1">
</h4>
<li> Books = $300 per week
<li> Calculator = $200 per week
<li> Computer = $100 per week
<li> Camera = $50 per week
<h4> Select how many weeks you wish to rent: </h4>
<p>
</form>
</body>
<html>
<head>
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
document.getElementById("numdays2").value=GetDays();
}
function GetTotal(){
var total = ($('[numb1]').val()(*0.8*total));
}
</script>
</head>
<body>
<div id="reserve_form">
<div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>
<h5>Total Amount in $ </h5>
<input size =12 type="text" name="total">
<p>
</div>
</body>
</html>
Error on line number 70. You also forgot to terminate the if statement
if(document.getElementById("drop_date")){
WORKING CODE:
<html>
<head>
<title> Rental Program </title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script language="javascript">
//listbox.htm
function processit() {
string1=document.getElementById("numb1").value;
//numb2=document.myform.alist.selectedIndex;
perweek=0;
if (string1 == 'Books') { perweek=300; }
if (string1 == 'Calculator') { perweek=200; }
if (string1 == 'Computer') { perweek=100; }
if (string1 == 'Camera') { perweek= 50; }
return perweek
}
</script>
</head>
<body
<form name=myform>
<h4>Enter the price of the item you wish to rent using the list below:
<input size =12 type="text" name="numb1" id="numb1">
</h4>
<li> Books = $300 per week
<li> Calculator = $200 per week
<li> Computer = $100 per week
<li> Camera = $50 per week
<h4> Select how many weeks you wish to rent: </h4>
<p>
</form>
</body>
<html>
<head>
<script type="text/javascript">
var items = {
"Book":"300"
}
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
var result = GetDays()
if(isNaN(result)){result="Please fill out both dates"}
document.getElementById("numdays2").value=result;
}
}
function GetTotal(){
var price = processit(document.getElementById("numb1").value)
var duration = document.getElementById("numdays2").value
var total = Math.floor((price*(0.8*(duration)))*100)/100;
if(isNaN(total)){total="Please fill out both dates"}
document.getElementById("total").value = total
}
</script>
</head>
<body>
<div id="reserve_form">
<div id="pickup_date"><p><label class="form">Pickup Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal();GetTotal()"/></p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal();GetTotal()"/></p></div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays" disabled/></div>
<h5>Total Amount in $ </h5>
<input size =12 type="text" name="total" id="total" disabled>
<p>
</div>
</body>
</html>
I am trying to make an annual salary calculator using Javascript. Here is what I have so far:
<div id="fulldiv">
<p> Enter the following information to calculate your annual salary.</p>
<p>Hourly Wage:
<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
<p>Hours Per Week:
<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
<button value="calculate" onclick="calcSalary()">Calculate</button></p>
<p id="results"></p>
<script type="text/javascript">
function calcSalary() {
var wage_element = document.getElementById('txt_wage');
var wage = parseInt(wage_element.value);
var hours_element = document.getElementById('txt_hours');
var hours = parseInt(hours_element.value);
var calculate = wage_element * hours_element * 52;
document.getElementByID('results').innerHTML = calculate;
}
</script>
</div>
When I click the button, nothing happens. Any thoughts?
Some typos in there. I have slightly rewritten and simplified the code to ensure the a) your calculations are on the value of the inputs and b) you are using labels to provide the text relative to the inputs - not p's.
function calcSalary() {
var wage = parseFloat(document.getElementById('txt_wage').value);
var hours = parseFloat(document.getElementById('txt_hours').value);
var calculate = wage * hours * 52;
document.getElementById('results').innerHTML = calculate;
}
<div id="fulldiv">
<p> Enter the following information to calculate your annual salary.</p>
<label for="txt_wage">Hourly Wage:</label>
<input type="text" name="wage" id="txt_wage" value ="0.00"/>
<label for="txt_hours">Hours Per Week:</label>
<input type="text" name="hours" id="txt_hours" value= "0.0"/>
<br/><br/>
<button value="calculate" onclick="calcSalary()">Calculate</button>
<p id="results"></p>
</div>
You code needs to be adjusted
var calculate = wage_element * hours_element * 52;
Should be changed into
var calculate = wage * hours * 52;
The problem is that you're calculating the element instead of the values.
#Gerard beat me to it by a minute, but here's the working code.
<div id="fulldiv">
<p> Enter the following information to calculate your annual salary.</p>
<p>Hourly Wage:
<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
<p>Hours Per Week:
<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
<button value="calculate" onclick="calcSalary()">Calculate</button></p>
<p id="results"></p>
<script type="text/javascript">
function calcSalary() {
var wage_element = document.getElementById('txt_wage');
var wage = parseInt(wage_element.value);
var hours_element = document.getElementById('txt_hours');
var hours = parseInt(hours_element.value);
var calculate = wage * hours * 52;
document.getElementById('results').innerHTML = calculate;
}
</script>
</div>
Updated code. calculate() still not working. The monthly payment amount is ultimately not being passed to the "total" id box. Does anyone see what the underlying problem is here? My syntax seems to be correct, I believe there may be a problem with my specification of where each variable is applied in the code.
I am having problems getting the function calculate() to pass the correct result in "total." Any possible solutions? The action of clicking the calculate button should display the total, but is displaying nothing at all, as if the button does not activate the calculate function at all.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr>
<form name id="Main">
<input type="number" id="price" placeholder="Price of the Car"/>
<br>
<br>
<input type="number" id="DP" placeholder="Down Payment"/>
<br>
<br>
<input type="number" id="R" placeholder="Annual % Rate"/>
<br>
<br>
<input type="number" id="N" placeholder="# of Years Loaned"/>
<br>
<br>
<input type="button" id="calculate" value="Calculate" onclick="javascript:calculate();"/>
<br>
<br>
<input type="number" id="total" placeholder="Total Cost..." readonly=""/>
<br>
<br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</html>
Use Math.pow() function instead. The ^ operator is not for mathematical power operations (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow).
Also, It's result.value = m, not the other way around :)
Also 2: R and M seem undefined to me, you have to initialize those variables with something, like you did with P and D.
Also 3: use chrome dev tools or anything like that. It will make your life much easier. Remember, javascript doesn't mean "no IDE" :D
Unfortunately, your original code will never work, as it has too many errors.
Here is the corrected fiddle for you, please, have a look:
http://jsfiddle.net/q330fqw8/
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;
}
I removed id="calculate" in HTML, because of this: Why JS function name conflicts with element ID?
In Javascript, the 4 variables P,D,R,N should be set properly. Finally, this m.value = result; -> result.value = m;
but I guess, you've already corrected some errors in the question. I worked with your original code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var P = document.getElementById("price").value;
var D = document.getElementById("DP").value;
var R = document.getElementById("R").value;
var N = document.getElementById("N").value;
var i = (R / 1200);
var n = (N * 12);
var m = ((P - D) * i * Math.pow(1 + i,n)) / (Math.pow(1 + i,n) - 1);
var result = document.getElementById('total');
result.value = m;}
</script>
</head>
<div align="center">
<hr/>
<form id="Main">
<input type="number" id="price" placeholder="Price of the Car" />
<br />
<br/>
<input type="number" id="DP" placeholder="Down Payment" />
<br/>
<br/>
<input type="number" id="R" placeholder="Annual % Rate" />
<br/>
<br/>
<input type="number" id="N" placeholder="# of Years Loaned" />
<br/>
<br/>
<input type="button" value="Calculate Monthly Payment" onclick="calculate();" />
<br/>
<br/>
Total Monthly Payment:<input type="number" id="total" placeholder="Total Cost..." readonly="" />
<br/>
<br/>
<input type="reset" value="Reset" />
</form>
<hr/>
</div>
I've been trying to figure out what is wrong with my code, I need to add the products (bananas, sodas, chips, candy) then multiply it with 10% tax given. Am I missing the variables for those products? I know something is missing but I don't know what to do!
<html>
<head>
<title>Total Calculator</title>
</head>
<body>
<p>
Bananas: <input type="text" id="bananasBox" value="" /> at $ 0.50 a piece<br/>
Sodas: <input type="text" id="sodasBox" value="" /> at $ 0.75 per can<br/>
Chips: <input type="text" id="chipsBox" value="" /> at $1.25 per bag<br/>
Candy: <input type="text" id="candyBox" value="" /> at $1.00 per pack<br/>
TAX is 10 %
</p>
<button id="Calculate" onclick= "Calculate()" value="Calculate">Calculate</button>
<script>
function Calculate(){
var total = 0;
var cost = document.getElementById("cost").value;
var tax = document.getElementById("tax").value;
total = cost * tax;
document.getElementById("total").value = total;
document.getElementById("outputDiv").innerHTML= "Your TOTAL is: " + total;
}
</script>
<hr/>
<div id="outputDiv">
</div>
</body>
</html>
I don't think you really put forth any effort, but here's a correct answer:
<html>
<head>
<title> Total Calculator </title>
</head>
<body>
<p>
Bananas: <input type="text" id="bananasBox" value=""> at $ 0.50 a piece<br>
Sodas : <input type="text" id="sodasBox" value=""> at $ 0.75 per can<br>
Chips : <input type="text" id="chipsBox" value=""> at $1.25 per bag<br>
Candy : <input type="text" id="candyBox" value=""> at $1.00 per pack<br>
TAX is 10 %
</p>
<input type="button" value="Calculate" id='Calculate' onclick= "Calculate()">
<script type="text/javascript">
function Calculate() {
var total = 0;
var bananas = Number(document.getElementById("bananasBox").value) * .5;
var sodas = Number(document.getElementById("sodasBox").value) * .75;
var chips = Number(document.getElementById("chipsBox").value) * 1.25;
var candy = Number(document.getElementById("candyBox").value) * 1;
var tax = 0.10;
total = (bananas+sodas+chips+candy)*(1+tax);
document.getElementById('outputDiv').innerHTML= 'Your TOTAL is: $' + Number(total).toFixed(2);
}
</script>
<hr>
<div id="outputDiv">
</div>
</body>
</html>
If you want me to explain it I will, but if you don't really have any intention in learning: it wouldn't be worth wasting my time.