如何添加 JS 函数以使包括 INPUT 字段在内的所有数字都显示 THOUSAND SEPARATOR？
Posted
技术标签:
【中文标题】如何添加 JS 函数以使包括 INPUT 字段在内的所有数字都显示 THOUSAND SEPARATOR？【英文标题】：How can I add a JS function to make all numbers including INPUT fields show the THOUSAND SEPARATOR? 【发布时间】：2020-05-26 19:56:51 【问题描述】：您能否看一下这段代码，并告诉我如何使所有数字都以千位分隔符“，”出现在所有数字上，包括用户在输入字段中输入新数字时。代码可见
https://jsfiddle.net/moeadas/53wqcmg6/29/
我不是开发人员，但我试图从事一些小项目以提高我的技能，所以我相信你会看到代码写得不好，但它对我来说工作正常:-)
非常感谢您的支持。
这里也是 JS 代码
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n)
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0)
document.getElementById("prevBtn").style.display = "none";
else
document.getElementById("prevBtn").style.display = "inline";
if (n == (x.length - 1))
document.getElementById("nextBtn").innerhtml = "Submit";
else
document.getElementById("nextBtn").innerHTML = "Next";
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
function nextPrev(n)
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length)
//...the form gets submitted:
document.getElementById("CreativeAcquisitions").submit();
return false;
// Otherwise, display the correct tab:
showTab(currentTab);
function validateForm()
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++)
// If a field is empty...
if (y[i].value == "")
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
// If the valid status is true, mark the step as finished and valid:
if (valid)
document.getElementsByClassName("step")[currentTab].className += " finish";
return valid; // return the valid status
function fixStepIndicator(n)
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++)
x[i].className = x[i].className.replace(" active", "");
//... and adds the "active" class to the current step:
x[n].className += " active";
function calcule2()
var i=0; for (i=0;i<= 50;i++) calcule();
function calcule()
CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value);
CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);
CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.B56.value);
CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) /100;
CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B68.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) /100;
CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) /100;
CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) /100;
CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) /100;
CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) /100;
CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value)+ parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value)+ parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);
CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);
CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);
CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);
CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B98.value = parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value)+ parseFloat(CreativeAcquisitions.B94.value)+ parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value)+ parseFloat(CreativeAcquisitions.B97.value);
CreativeAcquisitions.C98.value = parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value)+ parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value);
CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) /100;
CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) + parseFloat(CreativeAcquisitions.B105.value) - parseFloat(CreativeAcquisitions.B107.value);
【问题讨论】：
您需要使用事件处理程序。对于 INPUT 字段，请考虑诸如 on change、key-up 和/或模糊之类的事件。对于静态字段，可以在设置文本时对其进行格式化。你也许可以找到一个为你做这件事的 js 库。 看看这个：developer.mozilla.org/en-US/docs/Web/javascript/Reference/… 遗憾的是，没有可以触发的魔法“为所有数字执行此操作”设置。 有趣。会看看。谢谢我的朋友 【参考方案1】：请注意，我选择的是所有文本类型的输入，因此您应该将某个类添加到要应用千位分隔符的输入中，例如 class="thousand-sep" 并选择具有该类的输入，以避免如果输入不是有效数字，则获取无效的输入值（在您的情况下没关系，因为所有输入都是数字，尽管您甚至可以将类型设置为数字）。
//////////Newcode///////////////////////////
function milesIt(num)
return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
(i + 1) % 3 === 0 && i + 1 != a.length && "." + n || n).reverse().join("");
var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input)
//change the values to include the thousand separator each time the user changes an input
input.onchange = function(e)
inputs.forEach(function(inp)
inp.value = inp.value.replace(/[.]/g, '');
);
calcule2();
inputs.forEach(function(inp)
inp.value = milesIt(inp.value);
);
//e.target.value = milesIt(e.target.value.replace(/[.]/g, ''));
//change the values of the inputs at the beginning, although you could write them as HTML with the thousand separator values in the source code
input.value = milesIt(input.value);
);
////////////////////////////////////////////
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n)
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0)
document.getElementById("prevBtn").style.display = "none";
else
document.getElementById("prevBtn").style.display = "inline";
if (n == (x.length - 1))
document.getElementById("nextBtn").innerHTML = "Submit";
else
document.getElementById("nextBtn").innerHTML = "Next";
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
function nextPrev(n)
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length)
//...the form gets submitted:
document.getElementById("CreativeAcquisitions").submit();
return false;
// Otherwise, display the correct tab:
showTab(currentTab);
function validateForm()
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++)
// If a field is empty...
if (y[i].value == "")
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
// If the valid status is true, mark the step as finished and valid:
if (valid)
document.getElementsByClassName("step")[currentTab].className += " finish";
return valid; // return the valid status
function fixStepIndicator(n)
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++)
x[i].className = x[i].className.replace(" active", "");
//... and adds the "active" class to the current step:
x[n].className += " active";
function calcule2()
var i=0; for (i=0;i<= 50;i++) calcule();
function calcule()
CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value);
CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);
CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.B56.value);
CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) /100;
CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B68.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) /100;
CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) /100;
CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) /100;
CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) /100;
CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) /100;
CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value)+ parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value)+ parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);
CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);
CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);
CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);
CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B98.value = parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value)+ parseFloat(CreativeAcquisitions.B94.value)+ parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value)+ parseFloat(CreativeAcquisitions.B97.value);
CreativeAcquisitions.C98.value = parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value)+ parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value);
CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) /100;
CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) + parseFloat(CreativeAcquisitions.B105.value) - parseFloat(CreativeAcquisitions.B107.value);
/* Style the form */
form
font-family: 'Roboto', sans-serif;
background-color: #e6f9ff;
padding: 20px;
width: 100%;
min-width: 300px;
table
table-layout: fixed;
width: 100%;
.tableRow
height: 30px;
border-style: none;
/* Rounded Valuation Sections */
.roundedValuation
font-size: 20px;
font-weight: bold;
.roundedValuationInput
padding: 12px !important;
margin-left: 10px !important;
width: 150px;
font-size: 17px;
font-weight: bold;
background-color: #ffffff !important;
border: 1px solid #F0F0F0 !important;
p
font-family: 'Roboto', sans-serif;
margin-right: 15px;
h2
font-size: 24px;
color:#e6f9ff;
background-color: rgb(53,88,96);
padding: 20px !important;
margin: -20px !important;
h3
font-size: 20px;
color: #505050
h5
font-size: 15px;
.notes
font-size: 12px;
font-style: italic;
/* Style the total sum fields */
.total
padding: 10px !important;
width: 150px !important;
font-size: 17px !important;
font-weight: bold;
background-color: transparent !important;
border: none !important;
/* Style the input fields no pound sign */
.noSign
padding: 10px;
width: 150px !important;
font-size: 17px;
margin-left: 0 !important;
background-color: #ffffff;
border: 1px solid #F0F0F0;
/* Style the input fields step one */
.stepOne
padding: 10px;
width: 150px !important;
font-size: 17px;
margin-left: 0 !important;
background-color: #ffffff;
border: 1px solid #F0F0F0;
/* Mark step one input boxes that gets an error on validation: */
.stepOne.invalid
background-color: #ffdddd;
/* Style the input fields */
input
padding: 10px !important;
margin-left: 10px !important;
width: 150px;
font-size: 17px;
background-color: #ffffff !important;
border: 1px solid #F0F0F0 !important;
/* Mark input boxes that gets an error on validation: */
input.invalid
background-color: #ffdddd;
/* Hide all steps by default: */
.tab
display: none;
/* Make circles that indicate the steps of the form: */
.step
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
/* Mark the active step: */
.step.active
opacity: 1;
/* Mark the steps that are finished and valid: */
.step.finish
background-color: #4CAF50;
button
margin-top: 40px;
width: 120px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
background: rgb(53,88,96);
color: #e6f9ff;
button:hover
background: rgb(69,89,94);
/* Divi Theme Raltes Classes*/
.entry-content tr td, body.et-pb-preview #main-content .container tr td
border: none !important;
.entry-content table:not(.variations), body.et-pb-preview #main-content .container table
border: none !important;
<form id="CreativeAcquisitions" action="">
<div class="tab">
<h2>STEP ONE</h2>
<br>
<br>
<h3>Performance</h3>
<p>What is the Adjusted Net Profit (or EBITDA)?</p>
<input class="stepOne" type="text" onchange="calcule2()" name="B4" value="200000">
<br>
<br>
<p>What multiple would you like to apply? <span class="notes"> standard is from 2 to 3 (Preset value is 2) </span></p>
<input class="noSign" type="text" onchange="calcule2()" name="B6" value="2">
</div>
<div class="tab">
<h2>STEP TWO</h2>
<br>
<br>
<h3>Assets</h3>
<h4>On the closing date</h4>
<table>
<tr class="tableRow">
<td>
<p>How much Cash will be in the Bank account? <span class="notes"> (calculate 100%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B17" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p> How much in inventory will the business hold? <span class="notes"> (calculate 70%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B19" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Please enter rough value of property owned by the business: <span class="notes"> (calculate 75%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B21" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter value of invoices that are outstanding (Receivables): <span class="notes"> (calculate 80%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B23" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Enter value of other assets (like equipment and vehicles): <span class="notes"> (calculate 70%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B25" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<h5>
Total </h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B28" value="50000"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>STEP THREE</h2>
<br>
<br>
<h3>Liabilities</h3>
<h4>On the closing date</h4>
<table>
<tr class="tableRow">
<td>
<p>Enter value of outstanding Loans that the company has: </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B36" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter approx. value of Corporation Tax outstanding: </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B37" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter value of any money owed by the company (e.g to suppliers): </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B38" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Is it possible to defer PAYE payments? If so how much </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B39" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Is it possible to defer VAT payments? If so how much </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B40" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Can you borrow money against the company (New loan for Acquisition)? <span class="notes"> (calculate 100%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B41" value="120000"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>STEP FOUR</h2>
<br>
<br>
<h3>Seller Equity & Deferred Payments</h3>
<table>
<tr class="tableRow">
<td>
<p>Is the Seller willing to hold back some equity in the business? If so, what percentage: </p>
</td>
<td>%<input type="text" onchange="calcule2()" name="B46" value="10"></td>
</tr>
<tr class="tableRow">
<td>
<p> What percentage of the purchase price will the seller be willing to defer?</p>
</td>
<td>%<input type="text" onchange="calcule2()" name="B47" value="10"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>RESULTS</h2>
<br>
<br>
<h3>Valuation</h3>
<table>
<tr class="tableRow">
<td>
<p>
The value of the business is around: (TOTAL)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B52" value="442500"></td>
</tr>
<tr class="tableRow">
<td>
<h4>This is broken down into:</h4>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Payment for Goodwill</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B55" value="400000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Payment for Assets</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B56" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Payment for Liabilities</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B68" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p class="roundedValuation"> ENTER ROUNDED VALUATION</p>
</td>
<td>£<input class="roundedValuationInput" type="text" onchange="calcule2()" name="B200" value="0"></td>
</tr>
</table>
<br>
<h2>Deal Structure</h2>
<br>
<br>
<h4>You can structure the deal in the following manner:</h4>
<table>
<tr class="tableRow">
<td>
<p> VALUATION AMOUNT (Goodwill and Assets)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B66" value="442500"></td>
</tr>
<tr class="tableRow">
<td>
<p> MONEY POTENTIALLY RAISED FROM ALL ASSETS</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B67" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p>NEW LOAN RAISED</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B69" value="120000"></td>
</tr>
<tr class="tableRow">
<td>
<p>PAYMENT RETAINED FOR SELLER EQUITY SHARE</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B70" value="44250"></td>
</tr>
<tr class="tableRow">
<td>
<p> SELLER DEFERRMENT AMOUNT</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B71" value="44250"></td>
</tr>
<tr class="tableRow">
<td>
<p>SHORTFALL (SURPLUS)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B72" value="184000"></td>
</tr>
</table>
<br>
<h2> Assets Valuation Breakdown</h2>
<br>
<br>
<table>
<tr class="tableRow">
<td>
<h5>Assets </h5>
</td>
<td>
<h5>Input Amount </h5>
</td>
<td>
<h5>Value </h5>
</td>
<td>
<h5>Net Value </h5>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Cash </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B76" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C76" value="100"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D76" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Inventory</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B77" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C77" value="70"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D77" value="7000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Property</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B78" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C78" value="75"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D78" value="7500"></td>
</tr>
<tr class="tableRow">
<td>
<p> Debitors</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B79" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C79" value="80"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D79" value="8000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Others</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B80" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C80" value="100"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D80" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<h5> TOTAL</h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B81" value="50000"></td>
<td></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D81" value="42500"></td>
</tr>
</table>
<br>
<br>
<h2>Cash Flow Calculator</h2>
<br>
<br>
<table>
<tr class="tableRow">
<td>
<h5>LIABILITY </h5>
</td>
<td>
<h5>Total Amount </h5>
</td>
<td>
<h5>Yearly Repayment</h5>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Loan Repayment </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B91" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C91" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Corporation Tax </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B92" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C92" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Trade Creditors </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B93" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C93" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>PAYE Deferments </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B94" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C94" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p> VAT Deferments </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B95" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C95" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Seller Deferred Payment </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B96" value="44250"></td>
<td>£<input type="text" onchange="calcule2()" name="C96" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>New Loan taken </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B97" value="120000"></td>
<td>£<input type="text" onchange="calcule2()" name="C97" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<h5> TOTAL </h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B98" value="214250"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="C98" value="0"></td>
</tr>
</table>
<br>
<br>
<h2>SUMMARY</h2>
<br>
<br>
<table table-layout: fixed; width: 100%;>
<tr class="tableRow">
<td>
<h4>Net Profit </h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B101" value="200000"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CT RATE <span class="notes"> (Pre-set at 19%) </span> </h4>
</td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="B103" value="19"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CT DUE IN FUTURE : </h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B105" value="38000"></td>
</tr>
<tr class="tableRow">
<td>
<h4>COST OF PAYING LIABILITIES</h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B107" value="42850"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CASH FLOW SURPLUS PER YEAR <span class="notes"> (Post financing and tax) </span></h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B108" value="195150"></td>
</tr>
</table>
</div>
<div>
<div class="right">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>【讨论】：
感谢您的回复，但我如何在我的情况下应用此代码（请查看 JSFIDDLE 链接）谢谢一百万 好吧，我看了你的小提琴帖子，你不需要处理负数也不需要浮点数，所以我把函数改成尽可能简单，并添加一些代码来解决你的问题。 我真的非常感谢你。最后一个问题，我可以吗？一切看起来都不错，但我注意到 SUMS（或任何对其进行计算的字段）不起作用。是因为它将它们视为字符串吗？有什么解决办法吗？ 好吧，我没有在您的 HTML 中看到属性 onchange 事件侦听器，所以我应该使用 addEventListener 而不是替换您的侦听器，但即使这样做也需要 parseFloat 将值视为浮点数, 所以 20.000 将是 20 所以不正确的计算，我已经改变了我的代码来处理这个问题但是因为你的重复代码，我也不得不写一个重复的代码:(，注意现在不需要 onchange 属性监听器，你可以删除它们。 完美...非常感谢...我非常感谢您的所有努力...祝我的朋友好运:-)以上是关于如何添加 JS 函数以使包括 INPUT 字段在内的所有数字都显示 THOUSAND SEPARATOR？的主要内容，如果未能解决你的问题，请参考以下文章