国际网购付款选项计算器开发求助：百分比小数计算失效

Hey there! The problem you're facing comes down to using parseInt() in your calculations — this function only parses whole integers, so any decimal values (like 2.75 for fees) get chopped down to just 2. Let's fix that, plus tweak a few other parts to make your calculator more reliable.

The Root Cause #

Every time you use parseInt(value, 10), it discards any decimal portion of the input. For example:

• parseInt("2.75", 10) returns 2 instead of 2.75
• This breaks your fee calculation since you need the full decimal value to compute the correct percentage.

Modified JavaScript Code #

Replace your existing JS with this version, which uses parseFloat() (to handle decimals) and adds basic checks for empty inputs to avoid NaN results:

// 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"));

// Helper function to safely parse numbers (returns 0 if input is invalid/empty)
function safeParseNumber(value) {
  const num = parseFloat(value);
  return isNaN(num) ? 0 : num;
}

inputs.forEach(function(input){
  input.addEventListener("blur", function(){
    // Parse all values with safeParseNumber to handle decimals and empty inputs
    const mainValue = safeParseNumber(main.value);
    const joint1Value = safeParseNumber(joint1.value);
    const joint2Value = safeParseNumber(joint2.value);
    const joint3Value = safeParseNumber(joint3.value);
    
    // Calculate total with correct decimal handling
    const calculatedTotal = (mainValue * joint1Value) + joint3Value + (mainValue * (joint2Value / 100));
    // Round to 2 decimal places for currency format
    total.value = calculatedTotal.toFixed(2);
  });
});

Key Changes: #

• Replaced all parseInt() calls with parseFloat() via a helper function safeParseNumber to handle decimals
• Added a safety check to return 0 if an input is empty or invalid (prevents NaN in results)
• Used toFixed(2) to format the total as a currency value with 2 decimal places (more realistic for SAR amounts)

Minor HTML Fixes #

I noticed a couple of typos in your HTML — fixing these will improve user clarity:

<!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">Enter total amount in USD</label> <!-- Fixed "Ebter" to "Enter" -->
 <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 account in SAR , <mark>Approx.</mark></b></label> <!-- Fixed "accoutn" to "account" -->
 <input type="text" id="Total-dep" disabled readonly>
</div>
<br>
</body>
</html>

How It Works Now #

• When you enter 2.75 for bank fees, the code correctly uses 2.75 / 100 = 0.0275 in the calculation
• Empty inputs or non-numeric values will default to 0 instead of breaking the calculator
• The total is displayed with 2 decimal places, which is standard for currency

Your CSS can stay as-is — it's already set up nicely for the calculator layout!

内容的提问来源于stack exchange，提问作者Saiaf Alaklubi