I've a Javascript calculation tools which sometimes work and sometimes don't work. I don't understand why.
Here is my demo tools : http://propertyjungle.com.au/modern-business/tools_check.php
well, In my "Fixed agent cost when selling" tools there are 5 fields :
1) House Sale Price
2) Rate quoted by agent
3) Other Fees
And in "Result" part there are 2 fields:
1) Agent Fees:
2) Reducing the rate the agent is charging by 0.1% will save you
It's showing the result automatically. I mean on keypress.
So When I increment both "House Sales Price" and "Rate Quoted..." then both result fields is showing me "NaN". But it's should be show the value.. e.g:
House Sales Price = 10000
Rated Quoted = 0.3%
Other Fees = 0 (empty)
Result:
Agent Fees = 30 (House Sales Prices * Rated Quoted )
Reducing.... = 10 (0.1% of House sales Price)
After that If I increment "Other Fees" it's then showing the result but result is wrong. It's should be e.g :
Correct Result:
Agent Fees = 10030 (House Sales Prices * Rated Quoted + Other Fees[increment by 10,000] )
Reducing.... = 10 (0.1% of House sales Price)
Wrong Result :
Agent Fees = 10030 (House Sales Prices * Rated Quoted + Other Fees[increment by 10,000] )
Reducing.... = 10010.00
Here is my complete code:
Javascript:
function incrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value +=10000
document.getElementById('pvalue1').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value -=10000
document.getElementById('pvalue1').value = value;
}
function incrementValueO()
{
var value = parseInt(document.getElementById('otherFees').value, 10);
value = isNaN(value) ? 0 : value;
value +=10000
document.getElementById('otherFees').value = value;
$('#pvalue1').trigger("change");
}
function decrementValueO()
{
var value = parseInt(document.getElementById('otherFees').value, 10);
value = isNaN(value) ? 0 : value;
value -=10000
document.getElementById('otherFees').value = value;
}
function toggleIncrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value +=0.1
value = parseFloat(value).toFixed(2)
document.getElementById('pvalue2').value = value;
$('#pvalue1').trigger("change");
}
function toggleDecrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value -=0.1
value = parseFloat(value).toFixed(2)
document.getElementById('pvalue2').value = value;
$('#pvalue1').trigger("change");
}
jQuery(document).ready(function(){
$('#pvalue1').change(function(){
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
console.debug( parseFloat(document.getElementById('otherFees').value));
var otherFees = parseFloat(document.getElementById('otherFees').value);
var totalOtherFees = agentfee + otherFees;
$('#pvalue3').val(totalOtherFees);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
var finalvalue = parseFloat(finalvalue).toFixed(2)
$('#pvalue5').val(finalvalue);
});
$('#pvalue2').change(function(){
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
$('#pvalue3').val(agentfee);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
$('#pvalue5').val(finalvalue);
});
$('#otherFees').change(function(){
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
console.debug( parseFloat(document.getElementById('otherFees').value));
var otherFees = parseFloat(document.getElementById('otherFees').value);
var totalOtherFees = agentfee + otherFees;
$('#pvalue3').val(totalOtherFees);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
var finalvalue = parseFloat(finalvalue).toFixed(2)
$('#pvalue5').val(finalvalue);
});
});
Html Code:
<table border="0" cellpadding="5">
<tr>
<td>House Sale Price:</td>
<td>$</td>
<td><input name="pvalue1" class="form-control" onkeypress="validate(event)" placeholder=" Enter Sale Price" type="number" value="<?=$pvalue1?>" id="pvalue1" size="20" required ></td>
<td><input type="button" onClick="incrementValue()" value="+" /><input type="button" onClick="decrementValue()" value="-" /> </td>
</tr>
<tr>
<td>Rate quoted by agent:</td>
<td>%</td>
<td><input name="pvalue2" class="form-control" onkeypress="validate(event)" placeholder=" Percentage" type="number" value="<?=$pvalue2?>" id="pvalue2" size="20" required ></td>
<td><input type="button" onClick="toggleIncrement()" value="+" /><input type="button" onClick="toggleDecrement()" value="-" /></td>
</tr>
<tr>
<td>Other Fees</td>
<td>$</td>
<td><input name="otherFees" class="form-control" onkeypress="validate(event)" placeholder=" Enter Sale Price" type="number" value="<?=$pvalue1?>" id="otherFees" size="20" required ></td>
<td><input type="button" onClick="incrementValueO()" value="+" /><input type="button" onClick="decrementValueO()" value="-" /> </td>
</tr>
</table>
<input name="doRegister" type="submit" id="doRegister" value="Calculate" style="color:white;font-size:20px;" class="btn btn-primary">
<br><br>
<h2>Results</h2>
<table>
<tr>
<td>Agent Fees:</td>
<td>$</td>
<td><input name="pvalue3" onkeypress="validate(event)" class="form-control" placeholder="" type="number" value="<?=$pvalue3?>" id="pvalue3" size="10" class="resultfield" ></td></tr>
<tr>
<td></td>
<td><span id='show-me' class="form-control" style='display:none'><input name="pvalue4" placeholder="" type="number" value="<?=$pvalue4?>" id="pvalue4" size="10" class="resultfield" ></span></td></tr>
<tr>
<td>Reducing the rate the agent is charging by 0.1% will save you: </td>
<td>$</td>
<td><input name="pvalue5" onkeypress="validate(event)" class="form-control" placeholder="" type="number" value="<?=$pvalue5?>" id="pvalue5" size="10" class="resultfield" ></td>
</tr>
</table>
Many Thanks to you.
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
console.log($('#pvalue1').val()); //3
console.log( $('#pvalue2').val()); // ""
parseInt("") is NaN
You deal with isNaN in the code above, implement the same logic here.
Related
I input the values, and it works ONCE, which is a problem.
I try to change the numbers, and click Enter again, and it does nothing.
The only way it works again is if I use the scroll to up or down the current value.
var fuel = 2.5;
var mpg = 6;
function Hourly() {
var miles = document.getElementById('miles').value;
var brokerPay = document.getElementById('pay').value;
var gallons = miles / 6;
var hours = miles / 55;
var cost = gallons * fuel;
var net = brokerPay - cost
var hourlyPay = net / hours;
var newHeader = document.getElementById('changeMe');
newHeader.innerHTML = hourlyPay;
}
<h1 id="changeMe">Change me Here</h1>
<input type="number" placeholder="miles" id="miles" required/>
<input type="number" placeholder="Broker Pay" id="pay" required/>
<input type="submit" value="Enter" onclick="Hourly()" />
Can't figure out why my Javascript code won't run to show a letter grade and change the background color. I'm new at this, but thought I had it right...any ideas?
Writes the numeric grade in the bottom left cell of the table.
And the associated letter grade in the bottom right cell of the table.
(For this problem use: A >= 90 > B >= 80 > C >= 70 > D >= 60 > F)
If the grade is passing the background color of the letter grade cell changes to green. If the grade is failing the background color of the letter grade cell should turn red.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab11aKL.html</title>
<meta charset="utf-8">
<style>
</style>
<script>
function addNumbers() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
answer.value = parseFloat(t1.value * .20) + parseFloat(t2.value * .20) +
parseFloat(t3.value * .30) + parseFloat(t4.value * .125) +
parseFloat(t5.value * .125) + parseFloat(t6.value * .05);
}
function gradeLetter() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
var ct1 = parseFloat(t1.value * .20);
var ct2 = parseFloat(t2.value * .20);
var ct3 = parseFloat(t3.value * .30)
var ct4 = parseFloat(t4.value * .125);
var ct5 = parseFloat(t4.value * .125);
var ct6 = parseFloat(t6.value * .05);
if (answer >= 90 > ) {
answergrade = 'A';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else if (answer >= 80 > ) {
answergrade = 'B';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else if (answer >= 70 > ) {
answergrade = 'C';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else if (answer >= 60 > ) {
answergrade = 'D';
document.getElementById("answergrade").style.backgroundColor =
'green';
} else(answer < 60) {
answergrade = 'F';
document.getElementById("answergrade").style.backgroundColor =
'red';
}
}
</script>
</head>
<body>
<form name="tform" id="tform">
<table>
<tr>
<th></th>
<th>Score</th>
</tr>
<tr>
<td>Test 1</td>
<td><input type="text" name="t1" id="t1" /></td>
</tr>
<tr>
<td>Test 2</td>
<td><input type="text" name="t2" id="t2" /></td>
</tr>
<td>Final Exam</td>
<td><input type="text" name="t3" id="t3" /></td>
</tr>
<td>Labs</td>
<td><input type="text" name="t4" id="t4" /></td>
</tr>
<td>Project</td>
<td><input type="text" name="t5" id="t5" /></td>
</tr>
<td>Quizzes</td>
<td><input type="text" name="t6" id="t6" /></td>
</tr>
<tr>
<th colspan="2">
<input type="button" name="b1" id="b1" value="Calculate Grade" onclick="addNumbers(); gradeLetter()" />
</th>
</tr>
<tr>
<td><input type="text" name="answer" id="answer" /></td>
<td><input type="text" name="answergrade" id="answergrade" /></td>
</tr>
</table>
</form>
</body>
</html>
Your issue is missing values. Take a look at if/else clauses
else if (answer >=70 >{??})
There is no x>a>y type of comparison in javascript.
There are several problems here.
You don't have a variable defined for answer that you're referring to in the addNumbers() function.
You are setting answer.value in addNumbers(), but then comparing to answer in all of your conditionals in the gradeLetter() function.
t1 through t6 don't have a value in HTML.
answergrade being calculated in gradeLetter() isn't being written to that HTML element
Your conditionals aren't defined correctly
You can't have else (condition){//condition is true execute this stuff} , it's just else{//execute this code automatically}. When there's a condition after the first if statement use else if (condition){//condition is true execute this stuff}
Please see the below code which should get you pointed in the right direction.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab11aKL.html</title>
<meta charset="utf-8">
<style>
</style>
<script>
var answer;
function addNumbers()
{
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
answer = parseFloat(t1.value * .20) + parseFloat(t2.value * .20) +
parseFloat(t3.value * .30) + parseFloat(t4.value * .125) +
parseFloat(t5.value * .125) + parseFloat(t6.value * .05);
}
function gradeLetter()
{
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");
var ct1 = parseFloat(t1.value * .20);
var ct2 = parseFloat(t2.value * .20);
var ct3 = parseFloat(t3.value * .30)
var ct4 = parseFloat(t4.value * .125);
var ct5 = parseFloat(t4.value * .125);
var ct6 = parseFloat(t6.value * .05);
if (answer >=90)
{
answergrade = 'A';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
else if (answer >=80)
{
answergrade = 'B';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
else if (answer >=70)
{
answergrade = 'C';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
else if (answer >=60)
{
answergrade = 'D';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
else if (answer <60)
{
answergrade = 'F';
document.getElementById ("answergrade").style.backgroundColor =
'red';
}
var answerElem = document.getElementById('answergrade')
answerElem.innerText = answergrade;
}
</script>
</head>
<body>
<form name="tform" id="tform">
<table>
<tr>
<th></th>
<th>Score</th>
</tr>
<tr>
<td>Test 1</td>
<td><input type="text" name="t1" id="t1"/>10</td>
</tr>
<tr>
<td>Test 2</td>
<td><input type="text" name="t2" id="t2"/>50</td>
</tr>
<td>Final Exam</td>
<td><input type="text" name="t3" id="t3"/>100</td>
</tr>
<td>Labs</td>
<td><input type="text" name="t4" id="t4"/>90</td>
</tr>
<td>Project</td>
<td><input type="text" name="t5" id="t5"/>70</td>
</tr>
<td>Quizzes</td>
<td><input type="text" name="t6" id="t6"/>85</td>
</tr>
<tr>
<th colspan="2">
<input type="button" name="b1" id="b1"
value="Calculate Grade"
onclick="addNumbers(); gradeLetter()"/>
</th>
</tr>
<tr>
<td><input type="text" name="answer" id="answer"/></td>
<td><input type="text" name="answergrade" id="answergrade"/></td>
</tr>
</table>
</form>
</body>
</html>
There are several problems. Some of them are clearly visible if you use a browser's developer console to troubleshoot. If you are going to program javascript, it's a must to learn how to use the console.
Below is a working snippet. Run it to see it work.
I commented in the code below the variety of problems (just before the fixed code).
function addNumbers() {
var t1 = document.getElementById( "t1" );
var t2 = document.getElementById( "t2" );
var t3 = document.getElementById( "t3" );
var t4 = document.getElementById( "t4" );
var t5 = document.getElementById( "t5" );
var t6 = document.getElementById( "t6" );
var answer = document.getElementById('answer');
answer.value = parseFloat( t1.value * .20 ) + parseFloat( t2.value * .20 ) +
parseFloat( t3.value * .30 ) + parseFloat( t4.value * .125 ) +
parseFloat( t5.value * .125 ) + parseFloat( t6.value * .05 );
}
function gradeLetter() {
// you weren't getting the value for "answer"
// the + casts this to a number, so the comparisons work properly
var answer = +document.getElementById('answer').value;
var t1 = document.getElementById( "t1" );
var t2 = document.getElementById( "t2" );
var t3 = document.getElementById( "t3" );
var t4 = document.getElementById( "t4" );
var t5 = document.getElementById( "t5" );
var t6 = document.getElementById( "t6" );
var ct1 = parseFloat( t1.value * .20 );
var ct2 = parseFloat( t2.value * .20 );
var ct3 = parseFloat( t3.value * .30 )
var ct4 = parseFloat( t4.value * .125 );
var ct5 = parseFloat( t4.value * .125 );
var ct6 = parseFloat( t6.value * .05 );
// This is incorrect and causes a syntax error
// if ( answer >= 90 > ) {
if ( answer >= 90 ) {
answergrade = 'A';
document.getElementById( "answergrade" ).style.backgroundColor =
'green';
}
else if ( answer >= 80 ) {
answergrade = 'B';
document.getElementById( "answergrade" ).style.backgroundColor =
'green';
}
else if ( answer >= 70 ) {
answergrade = 'C';
document.getElementById( "answergrade" ).style.backgroundColor =
'green';
}
else if ( answer >= 60 ) {
answergrade = 'D';
document.getElementById( "answergrade" ).style.backgroundColor =
'green';
}
else if (answer < 60)
{
answergrade = 'F';
document.getElementById( "answergrade" ).style.backgroundColor =
'red';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab11aKL.html</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<form name="tform" id="tform">
<table>
<tr>
<th></th>
<th>Score</th>
</tr>
<tr>
<td>Test 1</td>
<td><input type="text" name="t1" id="t1"/></td>
</tr>
<tr>
<td>Test 2</td>
<td><input type="text" name="t2" id="t2"/></td>
</tr>
<td>Final Exam</td>
<td><input type="text" name="t3" id="t3"/></td>
</tr>
<td>Labs</td>
<td><input type="text" name="t4" id="t4"/></td>
</tr>
<td>Project</td>
<td><input type="text" name="t5" id="t5"/></td>
</tr>
<td>Quizzes</td>
<td><input type="text" name="t6" id="t6"/></td>
</tr>
<tr>
<th colspan="2">
<input type="button" name="b1" id="b1"
value="Calculate Grade"
onclick="addNumbers(); gradeLetter()"/>
</th>
</tr>
<tr>
<td><input type="text" name="answer" id="answer"/></td>
<td><input type="text" name="answergrade" id="answergrade"/></td>
</tr>
</table>
</form>
</body>
</html>
Close out you if and if else conditions:
if (answer >=90 >){
answergrade = 'A';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
Should be
if (answer >=90){
answergrade = 'A';
document.getElementById ("answergrade").style.backgroundColor = `
'green';
}
And the if else conditions need to be closed as well
if (answer >=80){
answergrade = 'B';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
Should be
if (answer >=80 && answer < 90){
answergrade = 'B';
document.getElementById ("answergrade").style.backgroundColor =
'green';
}
Hi I am trying to convert Sterling to Euros. But I can't seem to get the percentages correct. I have tried it several ways without luck. The idea is to get 1% of the sterling price then multiply it by the conversion rate and add it to the sterling price to make the euro total, and then do the same with vat.
Hope someone can help, thanks!
Here is my code.
var input = document.querySelectorAll('input');
var conversionRate = input[0];
var sterling = input[1];
var vat = input[2];
var euro = input[3];
init();
function init() {
calculateKeyUp();
}
function calculateKeyUp() {
for (var i = 0; i < input.length; i++) {
input[i].addEventListener("keyup", function() {
//var totalLessVat = (sterling.value) + (conversionRate.value * (sterling.value / 100));
var sterling1Per = sterling.value / 100;
var convert = sterling1Per * conversionRate.value;
var totalLessVat = convert + sterling.value;
//var total = (totalLessVat) + (vat.value * (totalLessVat / 100));
var euro1Per = totalLessVat / 100;
var addVat = euro1Per * vat.value;
var total = addVat + totalLessVat;
euro.value = Math.floor(total);
});
}
}
<div id="calculator-form">
<table>
<tr>
<td>Conversion Rate: </td>
<td><input type="number" id="conversionRate"> %</td>
</tr>
<tr>
<td>Sterling Price: </td>
<td><input type="number" id="sterling"> £</td>
</tr>
<tr>
<td>Vat: </td>
<td><input type="number" id="vat"> %</td>
</tr>
<tr>
<td>Euro Price is </td>
<td><input type="number" id="euro" disabled> €</td>
</tr>
</table>
</div>
The .value of an input is going to be a String, so you will need to parse the number out of each input you are working with. If it's an int you can use:
var sterling1Per = parseInt(sterling.value, 10) / 100;
If it's a float, you can use:
var sterling1Per = parseFloat(sterling.value) / 100;
Anywhere that you use an input .value that needs to be a number needs to be parsed accordingly
I have been trying to build a race predictor calculator based off of Peter Riegel's formula for a couple of days now and have only managed to get it working when the original and future distances are set the same (See below).
However I would like for the user to be able to select kilometres or miles using 'select' and 'options' in the form for both the original and future distance. I have played around with else and else if statements in the script but have completely failed at this. I would greatly appreciate it if someone could help me crack this. (I have put the select and options in already so it is just the scripting that I need help with).
I am completely self taught so I apologise if the code below is a complete mess or incorrect. Thank you! James
function predictorCalc() //Predicting future race results
{
var d1 = document.predictor.d1.value;
var t1 = document.predictor.time1hr.value * 60 * 60 + document.predictor.time1min.value * 60 + document.predictor.time1sec.value * 1;
var deg = document.predictor.deg.value;
var d2 = document.predictor.d2.value;
//NEED TO INPUT IF & ELSE IF STATEMENTS HERE TO MANIPULATE THE RESULT DEPENDING ON WHETHER THE DISTANCE SELECTED IN D1 or D2 is KM OR MILES//
t2 = t1 * (Math.pow((d2 / d1), deg)); //predicted time in seconds (Equation T2=T1*(D2/D1)1.06)
phr = Math.floor(t2/3600); //total hrs
pmin = Math.floor((t2 - (phr*(3600)))/60); //total mins
psec = Math.floor(t2 - (phr*(3600))-(pmin*60)); //total secs
document.predictor.time2hr.value = round(phr,0);
document.predictor.time2min.value = round(pmin,0);
document.predictor.time2sec.value = round(psec,0);
}
function round(x) {
return Math.round(x*100)/100;
}
<form name="predictor">
<table>
<tbody>
<tr>
<td>D1 (Original distance)</td>
<td><input type="text" name="d1" size="3">km</td>
<td>
<select size="1" name="d1units">
<option selected="" value="k">Kilometers</option>
<option value="m">Miles</option>
</select>
</td>
</tr>
<tr>
<td>T1 (original time)</td>
<td><input name="time1hr" size="3" maxlength="2" type="text">hr</td>
<td><input type="text" name="time1min" size="3">min</td>
<td><input type="text" name="time1sec" size="3">sec</td>
</tr>
<tr>
<td>D2 (Future distance competing in)</td>
<td><input type="text" name="d2" size="3">km</td>
<td>
<select size="1" name="d2units">
<option selected="" value="k">Kilometers</option>
<option value="m">Miles</option>
</select>
</td>
</tr>
<tr>
<td>Performance Degradation</td>
<td colspan="3"><input name="deg" size="2" maxlength="4" type="text" value="1.06">(6% or 1.06 as standard)</td>
</tr>
<tr>
<td><input onclick="predictorCalc()" value="Calculate" type="button"></td>
</tr>
<tr>
<td>T2 (Predicted future time)</td>
<td><input name="time2hr" size="3" maxlength="2" type="text">hr</td>
<td><input type="text" name="time2min" size="3">min</td>
<td><input type="text" name="time2sec" size="3">sec</td>
</tr>
</tbody>
</table>
</form>
function predictorCalc() //Predicting future race results
{
const kmPerMile=1.60934;
var d1u = document.predictor.d1units;
var d1units = d1u.options[d1u.selectedIndex].value;
var d1 = d1units=='k'?document.predictor.d1.value:document.predictor.d1.value*kmPerMile;
var d2u = document.predictor.d2units;
var d2units = d2u.options[d2u.selectedIndex].value;
var d2 = d2units=='k'?document.predictor.d2.value:document.predictor.d2.value*kmPerMile;
var t1 = document.predictor.time1hr.value * 60 * 60 + document.predictor.time1min.value * 60 + document.predictor.time1sec.value * 1;
var deg = document.predictor.deg.value;
//NEED TO INPUT IF & ELSE IF STATEMENTS HERE TO MANIPULATE THE RESULT DEPENDING ON WHETHER THE DISTANCE SELECTED IN D1 or D2 is KM OR MILES//
t2 = t1 * (Math.pow((d2 / d1), deg)); //predicted time in seconds (Equation T2=T1*(D2/D1)1.06)
phr = Math.floor(t2/3600); //total hrs
pmin = Math.floor((t2 - (phr*(3600)))/60); //total mins
psec = Math.floor(t2 - (phr*(3600))-(pmin*60)); //total secs
document.predictor.time2hr.value = round(phr,0);
document.predictor.time2min.value = round(pmin,0);
document.predictor.time2sec.value = round(psec,0);
}
Well, I've a javascript tools where I can calculate percentage(%) of a sum(e.g 10,000). It's working when I put value(e.g 10,000) and percentage(e.g 10%) but problem is, I just added a increment and decrement button so user don't have to write 10,000, 30,000 etc. They can use my increment and decrement button. Unfortunately after press on increment and decrement button the Result is not showing. If i put the number manually then It's working.
Live Tools:
http://propertyjungle.com.au/tools.php
Javascript Code:
<script>
function incrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value +=10000
document.getElementById('pvalue1').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value -=10000
document.getElementById('pvalue1').value = value;
}
function toggleIncrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value +=0.1
document.getElementById('pvalue2').value = value;
}
function toggleDecrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value -=0.1
document.getElementById('pvalue2').value = value;
}
jQuery(document).ready(function () {
$('#pvalue1').change(function () {
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
$('#pvalue3').val(agentfee);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
$('#pvalue5').val(finalvalue);
});
$('#pvalue2').change(function () {
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
$('#pvalue3').val(agentfee);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
$('#pvalue5').val(finalvalue);
});
});
</script>
Html code:
<table>
<tr>
<td>House Sale Price:</td>
<td>$<input name="pvalue1" onkeypress="validate(event)" value="" placeholder=" Enter Sale Price" style="width:140px;" type="number" value="<?=$pvalue1?>" id="pvalue1" size="20" class="required inputfield2" required ></td>
<td><input type="button" onClick="incrementValue()" value="+" /><input type="button" onClick="decrementValue()" value="-" /> </td>
</tr>
<tr>
<td>Rate quoted by agent:</td>
<td> <input name="pvalue2" onkeypress="validate(event)" value="0" placeholder=" Percentage" style="width:140px;" type="number" value="<?=$pvalue2?>" id="pvalue2" size="20" class="required inputfield2" required >%</td>
<td><input type="button" onClick="toggleIncrement()" value="+" /><input type="button" onClick="toggleDecrement" value="-" /></td>
</tr>
</table>
<h2>Results</h2>
<table>
<tr><td>Agent Fees:</td><td>$<input name="pvalue3" value="0" placeholder="" type="number" value="<?=$pvalue3?>" id="pvalue3" size="10" class="resultfield" ></td></tr>
<tr><td></td><td><div id='show-me' style='display:none'><input name="pvalue4" value="0" placeholder="" type="number" value="<?=$pvalue4?>" id="pvalue4" size="10" class="resultfield" ></div></td></tr>
<tr><td>Reducing the rate the agent is charging by 0.1% will save you: </td><td>$<input name="pvalue5" value="0" placeholder="" type="number" value="<?=$pvalue5?>" id="pvalue5" size="10" class="resultfield" ></td></tr>
</table>
This is happening because changing the value of a field does not trigger the change event: Why does the jquery change event not trigger when I set the value of a select using val()?
If you don't feel like refactoring all of your code, you could simply trigger the jQuery change event, which would then run the calculations:
function toggleIncrement(){
...
$("#pvalue1").trigger("change");
}
function toggleDecrement(){
...
$("#pvalue1").trigger("change");
}
...
Example.