-1

This is a simple multiplication calculator which multiplies box 1 value x box 2 value and produce the result. What I'm trying to achieve is all the three boxes should add thousand separators while retaining the decimal part.

If I type 1000 in box 1 or 2 it should auto convert as 1,000

For example: 1232323 x 23 should be as 1,232,323 x 23 = 28,343,429

 function calculate() {
  var myBox1 = document.getElementById('box1').value; 
  var myBox2 = document.getElementById('box2').value;
  var result = document.getElementById('result'); 
  var myResult = myBox1 * myBox2;
  result.value = myResult;
      }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<table width="80%" border="0">
  <tr>
    <th>Box 1</th>
    <th>Box 2</th>
    <th>Result</th>
  </tr>
  <tr>
    <td><input id="box1" type="text" oninput="calculate()" /></td>
    <td><input id="box2" type="text" oninput="calculate()" /></td>
    <td><input id="result" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
  
</body>
</html>
Sureyea G
  • 3
  • 2
  • 1
    Hi! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Your best bet here is to do your research, [search](/help/searching) for related topics on SO, and give it a go. ***If*** you get stuck and can't get unstuck after doing more research and searching, post a [mcve] of your attempt and say specifically where you're stuck. People will be glad to help. – T.J. Crowder Aug 19 '18 at 11:53
  • Possible duplicate of https://stackoverflow.com/questions/3753483/javascript-thousand-separator-string-format. – Chayim Friedman Aug 19 '18 at 11:53
  • There might be many similar questions but that is not specific to what I'm looking for. – Sureyea G Aug 19 '18 at 11:57
  • Please explain your question clearly – Muthusamy Aug 19 '18 at 12:15
  • Please see the answer below. The calculator should add comma separated values. – Sureyea G Aug 19 '18 at 12:26

1 Answers1

0

You can use the following as an answer. 

function calculate() {
  var myBox1 = updateValue('box1');
  var myBox2 = updateValue('box2');
  var myResult = myBox1 * myBox2;
  adTextRes('result', myResult)
}

function updateValue(nameOf) {
  var inputNo = document.getElementById(nameOf).value;
  var no = createNo(inputNo);
  adTextRes(nameOf, no);
  return no;
}

function adTextRes(nameOf, no) {
  var asText = String(no).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById(nameOf).value = asText;
}

function createNo(textin) {
  return Number(textin.replace(/,/g, ""));
}
<table width="80%" border="0">
  <tr>
    <th>Box 1</th>
    <th>Box 2</th>
    <th>Result</th>
  </tr>
  <tr>
    <td><input id="box1" type="text" oninput="calculate()" /></td>
    <td><input id="box2" type="text" oninput="calculate()" /></td>
    <td><input id="result" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Ullas Hunka
  • 2,119
  • 1
  • 15
  • 28