Develop Reference

Not showing result with decimal discount value

I have a discount jquery calculator plugin.It is working. But percentage is not working with decimal values like Eg: 5.45%, 10.50% , 15.70%, 20.75% etc.. I created a Codepen project for it. Please check this Codepen link https://codepen.io/coderco/pen/gOeReMQ . Here is my codes. Please help me..
HTML
<input type="text" id="Amount" value="">
<input type="text" value="10.45" id="Discount">
<input type="text" id="Result">
Script
$(document).on("change keyup blur", "#Discount", function() {
var main = $('#Amount').val();
var disc = $('#Discount').val();
var dec = (disc / 100).toFixed(2); //its convert 10 into 0.10
var mult = main * dec; // gives the value for subtract from main value
var discont = main - mult;
$('#Result').val(discont);
});

It's because of toFixed(2). When you divide the value by 100 then there are 4 decimal places.
For example:
Amount = 100, Discount = 10.45
dec = (10.45/100) = 0.1045 (Calling toFixed(2) changes it to 0.10 that means 10 instead of 10.45).
In my suggestion add toFixed(2) to the final answer (discount), Instead of while calculating.

JavaScript can toFixed() not cut everything after it's a specific size?

i want to make this toFixed() number to cut the number to 3 last digits, but also i want to show its e i mean it's 10^number
like if i put 0.1 to Number 1, it shows 2.204e-7 insted of 0.000 in number 2
html:
<h4>number 1</h4>
<input type="number" id="num1" oninput="myFunc()">
<h5 id="real"></h5>
<br>
<h4>number 2</h4>
<input type="number" id="num2">
javascript:
function myFunc(){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
num2.value = num1.value * 0.00000220462;
document.getElementById("real").innerHTML = "real value is: " + num2.value;
if(num1.value.toString().includes("0.") | num1.value.toString().startsWith(".")){
num2.value = Number.parseFloat(num2.value).toFixed(3);
}
}
check this link: https://codepen.io/RawandHr/pen/ZEYaONw

Try using toExponential() instead of toFixed().

Is there a way to multiply inputs when they begin with a decimal like this- .125 or even 0.7854... My result winds up being 0 or NaN

I need some insight again. I am trying to multiply three inputs times two hidden numbers. Two inputs being the same number (since i have yet to figure out how to Square a input). The calculation i am after is a Force calc we use in O&G. Wire diameter * Wire Diameter * Well Head Pressure * .7854(variable) * 1.5;; Eg. .125 * .125 * 6500 * .7854 * 1.5; Which should result in 119.65 (lbs)- instead i get NAN or if i use decimal like this 0.125 i get a result of 0. To Note the function works if i leave the decimal out all together but the answer is wrong naturally.
My Code
<div class="containerForce">
<p>
<h1>Force Calculation - Weight Required to Fall</h1>
<label>Wire OD</label>
<input type="number" id="num05">
<label>Wire OD</label>
<input type="number" id="num06">
<label>Well Head Pressure</label>
<input type="number" id="num07">
<p>
<input type="button" id="btn01" style="background-color: rgb(104, 199, 206)"
value="Required Weight" onclick="cal()" />
</p>
<p id="total3"></p>
</div>
Java Function
function cal() {
var numZero5 = document.getElementById('num05').value;
var numZero6 = document.getElementById('num06').value;
var numZero7 = document.getElementById('num07').value;
var total3 = parseInt(numZero5) * parseInt(numZero6) * parseInt(numZero7) * .7854 * 1.5;
var p = document.getElementById('total3');
p.innerHTML += total3;
}

Currently you are parsing your inputs to Integers. Integers are whole numbers, so everything after the decimal seperator is thrown away.
You can reproduce this behaviour by executing parseInt(1.5) in the browser console.
The method you are looking for is parseFloat() or Number(). I personally would go with parseFloat().
Additionally, you might want to change your last line to p.innerHTML = total3; so you replace the result in the paragraph instead of concetinating your results.
<div class="containerForce">
<h1>Force Calculation - Weight Required to Fall</h1>
<label>Wire OD</label>
<input type="number" id="num05">
<label>Wire OD</label>
<input type="number" id="num06">
<label>Well Head Pressure</label>
<input type="number" id="num07">
<p>
<input type="button" id="btn01" style="background-color: rgb(104, 199, 206)"
value="Required Weight" onclick="cal()" />
</p>
<p id="total3"></p>
</div>
<script>
function cal() {
var numZero5 = document.getElementById('num05').value;
var numZero6 = document.getElementById('num06').value;
var numZero7 = document.getElementById('num07').value;
var total3 = parseFloat(numZero5) * parseFloat(numZero6) * parseFloat(numZero7) * .7854 * 1.5;
var p = document.getElementById('total3');
p.innerHTML = total3;
}
</script>

Convert a number into a string and only keep two decimals in calc

I'm trying to have the code below calculate and have a final value that only shows two decimals for the id 'eqauls'.
I tried toFixed function but it doesn't work...
$('input').keyup(function(){
var firstValue = Number($('#box1').val());
var secondValue = Number($('#box2').val());
var thirdValue = Number($('#box3').val());
var forthValue = Number($('#box3').val());
var fifthValue = Number($('#boxA'));
document.getElementById('boxB').value = document.getElementById('answer').value
document.getElementById('result').value = firstValue * secondValue;
document.getElementById('answer').value = document.getElementById('result').value * forthValue;
document.getElementById('equals').value = document.getElementById('boxA').value / document.getElementById('answer').value
});

document.getElementById('equals').value = parseFloat(document.getElementById('boxA').value / document.getElementById('answer').value).toFixed(2)
To use .toFixed you need to use parseFloat first to ensure it is a float you are working with.
Fiddle

Try this parseInt(Number($('#box1').val())).toFixed(2) it will fixed value into two digit format

You can use toString() to convert number into string and toFixed() method to set exact two decimal point .
document.getElementById('equals').value = (document.getElementById('boxA').value / document.getElementById('answer').value).toFixed(2).toString();
Here the output of typeof document.getElementById('equals').value will be string.

I am not sure what you are are trying to calculate exactly, but this is one way to do it.
$('input').keyup(function() {
var firstValue = parseFloat($('#box1').val());
var secondValue = parseFloat($('#box2').val());
var thirdValue = parseFloat($('#box3').val());
var forthValue = parseFloat($('#box3').val());
var fifthValue = parseFloat($('#boxA').val());
// get the result
$('#result').val(firstValue * secondValue);
// get the answer
$('#answer').val($('#result').val() * forthValue);
// set the boxB value
$('#boxB').val($('#answer').val());
// get equals and then set to a fixed 2 decimals places
var equals = $('#boxA').val() / $('#answer').val();
$('#equals').val(equals.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
BOX 1<input id="box1" type="number"><br>
BOX 2<input id="box2" type="number"><br>
BOX 3<input id="box3" type="number"><br>
<br>
BOX A<input id="boxA" type="number"><br>
BOX B<input id="boxB" type="number"><br>
<br>
RESULT<input id="result" type="number"><br>
ANSWER<input id="answer" type="number"><br>
EQUALS<input id="equals" type="number"><br>

jQuery change text box value not working

I'm trying to display total price in sum label by multiplying qtyTxt value (user entered) with price. But it doesn't work, the if statement is never reached.
<input type="text" name="qtyTxt" value="1" size="2" style="width: 25px"/>
<label id="price">${adClicked.price}</label>
<label id="sum">${adClicked.price}</label>
<input type="hidden" name="id" value="${adClicked.id}"/>
<script>
$(".qtyTxt").bind('change', function () {
var sum=$(("#price").val())* ($(this).val());
$("#sum").val('Rs.'+sum);
});
</script>
There are no errors in the console and $("#sum").val('Rs.'+sum); works fine.

1) Use parseInt() or parseFloat() The parseInt() function parses a string and returns an integer.
2) Another mistake Don't use val() for label instead of use text() for label
var sum= parseInt($("#price").text() , 10) * parseInt($(this).val() ,10);
code be
$(".qtyTxt").bind('change', function () {
var sum= parseInt($("#price").text() , 10) * parseInt($(this).val() ,10);
$("#sum").text('Rs.'+sum);
});

Two issue:
1) You have error in your code, $(("#price").val()) should be $("#price").text() or $("#price").html()
2) You need to parse the values before doing mathematical calculation:
var sum=parseInt($("#price").text(),10)*parseInt($(this).val(),10) ;