I have some problem to get value from input field. Some input field is a result from calculation process, such as #t1_potensi and #t2_potensi. While #aliran is the result of the overall calculation process.
This is my HTML code.
<input oninput="hitung()" name="v_potensi" id="v_potensi" type="text" placeholder="liter . . ." />
<input oninput="hitung()" name="a_potensi" id="a_potensi" type="text" placeholder="menit . . ." />
<input oninput="hitung()" name="b_potensi" id="b_potensi" type="text" placeholder="menit . . ." />
<input oninput="hitungT1()" name="kecepatan_air" id="kecepatan_air" type="text" placeholder="km/jam . . ." />
<input oninput="hitungT1()" name="jarak1" id="jarak1" type="text" placeholder="kilometer . . ." />
<input oninput="hitungT2()" name="kecepatan_back" id="kecepatan_back" type="text" placeholder="km/jam . . ." />
<input oninput="hitungT2()" name="jarak2" id="jarak2" type="text" placeholder="kilometer . . ." />
<!-- #t1_potensi = 0.65 + ((60 / #kecepatan_air) * #jarak1) -->
<input readonly="readonly" oninput="hitung()" name="t1_potensi" id="t1_potensi" type="text" placeholder="menit . . ." />
<!-- #t2_potensi = 0.65 + ((60 / #kecepatan_back) * #jarak2) -->
<input readonly="readonly" oninput="hitung()" name="t2_potensi" id="t2_potensi" type="text" placeholder="menit . . ." />
<!-- #aliran = (#v_potensi / (#a_potensi + #b_potensi + #t1_potensi + #t2_potensi)) - 0.1 -->
<input readonly="readonly" name="aliran" id="aliran" type="text" placeholder="liter/menit . . ." />
I use javascript to do the calculation process, to get a result for #t1_potensi and #t2_potensi. My problem start when i try to calculate overall (#aliran), my javascript function in particular to obtain the overall result can not work properly. Here my javascript for #t1_potensi, #t2_potensi, and #aliran.
//To get #t1_potensi
function hitungT1() {
var kecKm = document.getElementById('kecepatan_air').value;
var d1 = document.getElementById('jarak1').value;
var result = document.getElementById('t1_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d1 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #t2_potensi
function hitungT2() {
var kecKm = document.getElementById('kecepatan_back').value;
var d2 = document.getElementById('jarak2').value;
var result = document.getElementById('t2_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d2 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #aliran
function hitung() {
var vol = document.getElementById('v_potensi').value;
var a = document.getElementById('a_potensi').value;
var b = document.getElementById('b_potensi').value;
var t1 = document.getElementById('t1_potensi').value;
var t2 = document.getElementById('t2_potensi').value;
var hasil = document.getElementById('aliran');
//convert liter to galon
var galon = Math.round(vol * 0.264172051);
var sumT = t1 + t2;
var sum = a + sumT + b;
var dev = galon / sum;
var result = Math.round(dev - 0.1);
hasil.value = result;
}
Does anyone can help me to solve my problem? or maybe make my javascript function more efficient. thanks.
Use parseFloat() on the numbers you're getting with document.getElementById('...').value:
//To get #t1_potensi
function hitungT1() {
var kecKm = parseFloat(document.getElementById('kecepatan_air').value);
var d1 = parseFloat(document.getElementById('jarak1').value);
var result = document.getElementById('t1_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d1 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #t2_potensi
function hitungT2() {
var kecKm = parseFloat(document.getElementById('kecepatan_back').value);
var d2 = parseFloat(document.getElementById('jarak2').value);
var result = document.getElementById('t2_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d2 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #aliran
function hitung() {
var vol = parseFloat(document.getElementById('v_potensi').value);
var a = parseFloat(document.getElementById('a_potensi').value);
var b = parseFloat(document.getElementById('b_potensi').value);
var t1 = parseFloat(document.getElementById('t1_potensi').value);
var t2 = parseFloat(document.getElementById('t2_potensi').value);
var hasil = document.getElementById('aliran');
//convert liter to galon
var galon = Math.round(vol * 0.264172051);
var sumT = t1 + t2;
var sum = a + sumT + b;
var dev = galon / sum;
var result = Math.round(dev - 0.1);
hasil.value = result;
}
Also, it's a bit tricky to me why you call the hitung() function only after editing one of the first three text boxes. Why not call all three functions every time any field is changed? Wouldn't that be better?
Up to you. Also, after you've placed parseFloat calls like above, please use console.log(string or variable to log), e.g. console.log('dev is: ' + dev). That way you can easily debug your code - see what all the values are during any calculation.
Also, do you really need to round the final result?
Related
I'm trying to do a pivot calculator to calculate future forex and stock prices, part of a strategy from Mark Fisher's the logical trader. I have tried a couple of ways to make this calculator. Let me know how I can fix this code to make it work. Thank you in advance. How can I debug?
function calculatePivot() {
var high = document.getElementById("high").value;
var low = document.getElementById("low").value;
var close = document.getElementById("close").value;
var dailyPivot = document.getElementById("high").value + document.getElementById("low").value + document.getElementById("close").value;
var preSecondNumber = document.getElementById("high").value + document.getElementById("close").value;
var secondNumber = document.getElementById("preSecondNumber").value / 2;
var pivotdifferential = document.getElementById("dailyPivot").value - document.getElementById("secondNumber").value;
var pivotrange1 = document.getElementById("dailyPivot").value + document.getElementById("pivotdifferential").value;
var pivotrange2 = document.getElementById("dailyPivot").value - document.getElementById("pivotdifferential").value;
alert(parseInt(dailyPivot) + parseInt(pivotdifferential));
alert(parseInt(dailyPivot) - parseInt(pivotdifferential));
console.log(document.getElementById("high").value);
}
<input type="text" name="" id="high">
<input type="text" name="" id="low">
<input type="text" name="" id="close">
<button onclick="calculatePivot()">Calculate</button>
You can try by changing your function by this function, I this problem is with parseInt(), need to call when take values from ,
function calculatePivot() {
var high = parseInt(document.getElementById("high").value);
var low = parseInt(document.getElementById("low").value);
var close = parseInt(document.getElementById("close").value);
var dailyPivot = high + low + close;
var preSecondNumber = high + close;
var secondNumber = preSecondNumber / 2;
var pivotdifferential = dailyPivot - secondNumber;
var pivotrange1 = dailyPivot + pivotdifferential;
var pivotrange2 = dailyPivot- pivotdifferential;
alert(dailyPivot + pivotdifferential);
alert(dailyPivot - pivotdifferential);
console.log(high);
}
Because document.getElementById("x") return string value.You should parse string to number with parseInt(), parseFloat() or Number():
function calculatePivot() {
var high = Number(document.getElementById("high").value);
var low = Number(document.getElementById("low").value);
var close = Number(document.getElementById("close").value);
var dailyPivot = high + low + close;
var preSecondNumber = high + close;
var secondNumber = preSecondNumber / 2;
var pivotdifferential = dailyPivot - secondNumber;
var pivotrange1 = dailyPivot + pivotdifferential;
var pivotrange2 = dailyPivot- pivotdifferential;
alert(dailyPivot+pivotdifferential);
alert(dailyPivot-pivotdifferential);
}
this is my html input field
<input type="number" id="t1">
<br />
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change<div>
this is my script
<script>
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
var lc = c + 200;
var tax = 2.1;
var tot = lc * tax;
l.innerHTML=tot;
}
</script>
and in text box i enter 10 so result is 441 this is the calculation 10+200 = 210
then 210*2.1 = 441
but in text box i enter 10 and click button i got 21420
the problem is var lc = c + 200; this is not calculate correct here its work 10200
and i try this method also var x = 200; var lc = c + x; this is also i got 10200 how can i fix this?
type of value in input number is string.
var val = document.getElementById('t1').value ;
console.log( typeof val ) ;
<input type="number" id="t1">
So you must convert to number like this:
var lc = Number(c) + 200 ;
//OR
var lc = parseInt(c) + 200 ;
//OR
var lc = parseFloat(c) + 200 ;
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
var lc = Number(c) + 200;
var tax = 2.1;
var tot = lc * tax;
l.innerHTML=tot;
}
<input type="number" id="t1">
<br />
<button type="button" onclick="getvalue()">calculate</button>
<br />
<div id="l1">change <div>
Even though the type of input is number, actually the value is of type string. That's why string concatenation is happening.
You can check the type of value with typeof operator.
To perform the intended arithmetic operation, you have to convert the value to number.
Please Note: It is better to use textContent instead of innerHTML when dealing with text only content.
var c = Number(document.getElementById('t1').value);
function getvalue() {
var l = document.getElementById('l1');
var c = document.getElementById('t1').value;
console.log(typeof(c)); //string
var lc = Number(c) + 200;
var tax = 2.1;
var tot = lc * tax;
l.textContent = tot;
}
<input type="number" id="t1"> <br />
<button type="button" onclick="getvalue()">calculate</button> <br />
<div id="l1">change <div>
So I have this form that is performing very basic calculations and when I submit it, it results to NaN.
The thing that is confusing me is when I do a typeof of one of the variables assigned to the value of each input, it returns "number", and yet I get NaN as a result. Can anyone tell me why or what it is I am doing wrong?
Here's my HTML:
<form name="baddiesCost">
<input type="number" placeholder="Total Caught" name="goomba" id="goomba-form">
<input type="number" placeholder="Total Caught" name="bobombs" id="bob-ombs-form">
<input type="number" placeholder="Total Caught" name="cheepCheeps" id="cheep-form">
<button id="submitForm">Submit</button>
</form>
<h1 id="total"></h1>
Here's my JavaScript:
document.baddiesCost.addEventListener("submit", function(e) {
e.preventDefault();
var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
var goombaCost = 5;
var bobombsCost = 7;
var cheepCost = 11;
var showTotal = document.getElementById("total");
var total = goombaCaught + bobombsCaught + cheepsCaught;
showTotal.textContent = cheepsCaught;
console.log(bobombsCaught);
console.log(typeof bobombsCaught);
})
This statement document.baddiesCost.bobombs.value * bobombsCost; uses variable bobombsCost which is not defined at this time.
So, it is similar to: document.baddiesCost.bobombs.value * undefined; which will be NaN.
To solve this put variable inicialization before usage like in following code:
document.baddiesCost.addEventListener("submit", function(e) {
e.preventDefault();
var goombaCost = 5;
var bobombsCost = 7;
var cheepCost = 11;
var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
var showTotal = document.getElementById("total");
var total = goombaCaught + bobombsCaught + cheepsCaught;
showTotal.textContent = cheepsCaught;
console.log(bobombsCaught);
console.log(typeof bobombsCaught);
})
Anyway, NaN is number type, you can refer to following post for more explaination.
I have a weird problem with javascript mathematics here is my code :
<script>
function four() {
var price = document.getElementById("price").value;
var sood = (price * 2.5) / 100;
var pricetopay = price + sood ;
var pishpardakht = pricetopay / 3;
document.getElementById("PISH").value = pishpardakht;
var mabaghi = pricetopay - pishpardakht;
var ghest = mabaghi / 4;
document.getElementById("GHEST").value = ghest;
}
</script>
and when the price is 100 ( price = 100 )
pish : 334.1666666666667
ghest : 167.08333333333331
how can i fix that ?
Here's a solution you had to parse the value that you get from your element.
function four() {
var priceUnparsed = document.getElementById("price").value;
var price= parseFloat(priceUnparsed );
var sood = (price * 2.5) / 100;
var pricetopay = price + sood ;
var pishpardakht = pricetopay / 3;
alert(pishpardakht);
document.getElementById("PISH").value = pishpardakht;
var mabaghi = pricetopay - pishpardakht;
var ghest = mabaghi / 4;
document.getElementById("GHEST").value = ghest;
}
<input id="price" value="100">
<button onclick="four()">Go</button>
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.