HTML JavaScript would not allow nor consider decimals

Question

I am trying to create a calculator, to evaluate two payment options for an international online purchasing, to give best decision either to proceed with website original currency [which is different than buyer credit card currency] and in this case buyer bank exchange rate will apply, or to proceed with website preset exchange rate to match buyer credit card currency ignoring bank exchange rate.

The idea is that 1 USD equal to 3.75, and it varies sometimes, but few websites are setting their own exchange rate, and in our case sometimes if a customer buys using website exchange rate, it reaches to 1 USD equal to 4.

I am trying to give customers a better idea of which option to proceed with, as well as am adding many fields to consider, to show the best result possible, such as bank processing fees.

I have one issue, I could not make bank processing fees to be a percentage input and considered in the calculation. Thus, I thought the customer can enter the percentage as a value, and I will do the conversion in the code. For example, bank processing fees are 2.75%, I'll let the customer enter a value 2.75 and inside the code, I will have it work by conversion 2.75 / 100. After testing, I can see that code is calculation only an integer number of percentages, either 2 or 3, and so on; it does not consider decimals like in my case 2.75!

Pls, help if possible, to view solutions of the code amendment.

Thank you, and appreciate your insights!

// Do all your JavaScript in a separate JavaScript section
var main = document.getElementById("Dep-main");
var joint1 = document.getElementById("Dep-joint1");
var joint2 = document.getElementById("Dep-joint2");
var joint3 = document.getElementById("Dep-joint3");
var total = document.getElementById("Total-dep");

var inputs = Array.prototype.slice.call(document.querySelectorAll("div > input"));

inputs.forEach(function(input){

  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    total.value = (parseInt(main.value, 10) * parseInt(joint1.value, 10)) + (parseInt(joint3.value, 10)) + (parseInt(main.value, 10) * ((parseInt(joint2.value, 10) / 100)));
  });
});

label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<body>

<br>

<center><img src="https://logos-download.com/wp-content/uploads/2016/03/Asos_logo.png" width="270" height="108"></center>

<br>

<center><h3>Best Payment Option Evaluator</h3></center>

<br>

<div class="center">

	<label for="dep-nothing">Enter ASOS total amount in SAR [using ASOS Site Exchange Rate]</label>
    <input type="text" id="dep-nothing" value="0">
	<hr>
    <label for="dep-main">Ebter total amount in USD</label>
    <input type="text" id="Dep-main" value="0">

    <label for="dep-joint1">Enter todays exchange rate from your bank [1 USD = X SAR]</label>
    <input type="text" id="Dep-joint1" value="0">

    <label for="dep-joint2">Enter bank fees in numbers [will be converted into percentage]</label>
    <input type="text" id="Dep-joint2" value="0">

    <label for="dep-joint3">Enter buyer commission value in SAR</label>
    <input type="text" id="Dep-joint3" value="0">
    
    <label for="total-dep"><b>If you proceed with USD, below amount will be deducted from your bank accoutn in SAR , <mark>Approx.</mark></b></label>
    <input type="text" id="Total-dep"  disabled readonly>
  

</div>

<br>

 
</body>


</html>

Instead of doing this total.value = (parseInt(main.value, 10) * parseInt(joint1.value, 10)) + (parseInt(joint3.value, 10)) + (parseInt(main.value, 10) * ((parseInt(joint2.value, 10) / 100))); you can replace the parseInt() into a parseFloat() and that would be fix to your issue. Thanks — Jesper Martinez
– Jesper Martinez, Commented May 9, 2020 at 5:04

JulianT · Accepted Answer · 2020-05-09 04:53:54Z

1

You are using parseInt() (which converts the result to whole numbers), try using parseFloat() instead.

answered May 9, 2020 at 4:53

JulianT

362 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nadir · Accepted Answer · 2020-05-09 05:00:09Z

0

replace parseInt by parseFloat, you can use .toFixed with parse float to limit deci

answered May 9, 2020 at 5:00

Nadir

11 silver badge1 bronze badge

Comments

ROOT · Accepted Answer · 2020-05-09 05:08:33Z

For decimal number you have to use .parseFloat() function, not .pareseInt()

// Do all your JavaScript in a separate JavaScript section
var main = document.getElementById("Dep-main");
var joint1 = document.getElementById("Dep-joint1");
var joint2 = document.getElementById("Dep-joint2");
var joint3 = document.getElementById("Dep-joint3");
var total = document.getElementById("Total-dep");

var inputs = Array.prototype.slice.call(document.querySelectorAll("div > input"));

inputs.forEach(function(input){

  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    total.value = (parseFloat(main.value) * parseFloat(joint1.value)) + (parseFloat(joint3.value)) + (parseFloat(main.value) * ((parseFloat(joint2.value) / 100)));
  });
});

label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<body>

<br>

<center><img src="https://logos-download.com/wp-content/uploads/2016/03/Asos_logo.png" width="270" height="108"></center>

<br>

<center><h3>Best Payment Option Evaluator</h3></center>

<br>

<div class="center">

	<label for="dep-nothing">Enter ASOS total amount in SAR [using ASOS Site Exchange Rate]</label>
    <input type="text" id="dep-nothing" value="0">
	<hr>
    <label for="dep-main">Ebter total amount in USD</label>
    <input type="text" id="Dep-main" value="0">

    <label for="dep-joint1">Enter todays exchange rate from your bank [1 USD = X SAR]</label>
    <input type="text" id="Dep-joint1" value="0">

    <label for="dep-joint2">Enter bank fees in numbers [will be converted into percentage]</label>
    <input type="text" id="Dep-joint2" value="0">

    <label for="dep-joint3">Enter buyer commission value in SAR</label>
    <input type="text" id="Dep-joint3" value="0">
    
    <label for="total-dep"><b>If you proceed with USD, below amount will be deducted from your bank accoutn in SAR , <mark>Approx.</mark></b></label>
    <input type="text" id="Total-dep"  disabled readonly>
  

</div>

<br>

 
</body>


</html>

Matthew Abikoye · Accepted Answer · 2020-05-09 05:20:33Z

0

The parseInt() function is the course of the problem. Whenever this function is used, it converts the value passed to it to an integer by truncation the decimal value. For example parseInt("2.7")= 2. You can use the following instead.

total.value = (parseInt(main.value, 10) * parseInt(joint1.value, 10)) + (parseInt(joint3.value, 10)) + (parseInt(main.value, 10) * ((parseFloat(joint2.value, 10) / 100)));

answered May 9, 2020 at 5:20

Matthew Abikoye

11 bronze badge

Collectives™ on Stack Overflow

HTML JavaScript would not allow nor consider decimals

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related