HTML JavaScript не допускает и не рассматривает десятичные дроби - PullRequest
1 голос
/ 09 мая 2020

Я пытаюсь создать калькулятор, чтобы оценить два варианта оплаты для международной онлайн-покупки, чтобы дать лучшее решение либо продолжить с исходной валютой веб-сайта [которая отличается от валюты кредитной карты покупателя], и в этом случае обменять банк покупателя будет применяться обменный курс, или продолжить использование предварительно установленного на веб-сайте обменного курса, соответствующего валюте кредитной карты покупателя, без учета обменного курса банка. , и иногда он варьируется, но немногие веб-сайты устанавливают свой собственный обменный курс, и в нашем случае иногда, если клиент покупает, используя обменный курс веб-сайта, он достигает 1 доллар США , равный 4 .

Я пытаюсь дать клиентам лучшее представление о том, какой вариант следует использовать, а также добавляю множество полей для рассмотрения, чтобы показать наилучший возможный результат, например, комиссию за банковские операции.

У меня есть одна проблема: я не мог сделать комиссию за обработку в процентах и ​​рассмотреть в е расчет. Таким образом, я подумал, что покупатель может ввести процент как значение, а я сделаю преобразование в коде. Например, комиссия банка за обработку составляет 2,75% . Я позволю клиенту ввести значение 2,75 , и внутри кода он будет работать путем преобразования 2.75 / 100. После тестирования я вижу, что код вычисляет только целое число процентов, либо 2 , или 3 , и так далее; он не считает десятичные дроби, как в моем случае 2,75 !

Пожалуйста, помогите, если возможно, чтобы просмотреть решения по поправке кода.

Спасибо и ценим ваше понимание !

// 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>

Ответы [ 4 ]

1 голос
/ 09 мая 2020

Вы используете parseInt () (который преобразует результат в целые числа), попробуйте вместо этого использовать parseFloat ().

0 голосов
/ 09 мая 2020

Функция parseInt () - это ход проблемы. Всякий раз, когда эта функция используется, она преобразует переданное ей значение в целое число путем усечения десятичного значения. Например, parseInt("2.7") = 2. Вместо этого можно использовать следующее.

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

0 голосов
/ 09 мая 2020

Для десятичного числа вы должны использовать функцию .parseFloat(), а не .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>
0 голосов
/ 09 мая 2020

замените parseInt на parseFloat, вы можете использовать .toFixed с parse float, чтобы ограничить deci

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...