round with 4 decimal places and trailing zeros if required

by rwone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/7.1.1/decimal.min.js"></script>
<p>
  The following handles two scenarios:
</p>
<ul>
  <li>
    Input of a single value to test scenarios like:
  </li>
</ul>
<div class="my_code">
  <p>
    var my_value = 1.55556
  </p>
  <p>
    // perform rounding and decimalising on my_value
  </p>
</div>
<ul>
  <li>
    Input of a value and a formula to test scenarios like:
  </li>
</ul>
<div class="my_code">
  <p>
    var my_value = value * 1.7968
  </p>
  <p>
    // perform rounding and decimalising on my_value
  </p>
</div>
<input id="my_number" placeholder="number">
<input id="my_formula" placeholder="number to be multiplied by">
<input id="value_cb" type="checkbox"><span class="cb_text">value only</span>
<button id="click_me">
  submit
</button>
<p id="result">&nbsp;</p>
<p>
  Some test values (for value only testing):
</p>
<ul>
  <li>1.55556 returns 1.5556</li>
  <li>1.55554 returns 1.5555</li>
  <li>1.55555 returns 1.5556</li>
  <li>4089.76545 returns 4089.7655</li>
  <li>1 returns 1.0000</li>
  <li>1.34 returns 1.3400</li>
  <li>1.344 returns 1.3440</li>
</ul>
<p>
  Goals:
</p>
<ul>
  <li>Javascript result of original_value * formula gives same result as Google formula eg f6 = f5 * 1.073 (where cells are formatted as numbers to 4 decimal places)</li>
  <li>Rounded to 4 decimal places</li>
  <li>Has trailing zeros when required</li>
</ul>
<div id="footer">
</div>

CSS

p,
li,
input,
button {
  font-family: arial;
  font-size: 14px;
}

input,
button {
  padding: 5px;
}

.my_code {
  padding: 0px 20px;
  background: #333;
  font-family: arial;
  border: 1px solid #ddd;
  margin: 10px 0px;
  color: #b3f5ff;
  letter-spacing: 1px;
}

#my_number {
  width: 150px;
  margin-right: 15px;
  margin-top: 20px;
}

#my_formula {
  width: 225px;
  margin-right: 15px;
}

#value_cb:hover {
  cursor: pointer;
}

.cb_text {
  font-family: arial;
  margin-right: 20px;
  color: #666;
}

button {
  width: 200px;
}

input {
  letter-spacing: 2px;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

li {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

#result {
  background: beige;
  padding: 10px;
  border: 1px solid #333;
  letter-spacing: 2px;
}

#footer {
  height: 50px;
}

JavaScript

function roundAndDecimalise(original_value, multiplier) {
  // if only value provided
  // test value eg:  2.5896444445
  if (document.getElementById('value_cb').checked) {
    console.log("only a value was provided");
    var my_value = original_value;
    console.log("typeof my_value is: " + typeof(my_value));
    // var my_decimal_js_value = new Decimal(original_value);
    // adding 24/06/17, replaces above variable declaration, this rounding will also replace Math.round in addZerosOrNot, (4,7) means 4 decimals places with ROUND_HALF_CEIL rounding, equivalent to Math.round, see: https://mikemcl.github.io/decimal.js/#toDP
    var my_decimal_js_value = new Decimal(original_value).toDecimalPlaces(4, 7);
    console.log("typeof my_decimal_js_value is: " + typeof(my_decimal_js_value));
  }
  // if value and formula provided
  // multiply by the formula
  else {
    console.log("value and formula provided");
    // this needs to replicate a Google Sheet formula where
    // original_value is a number formatted to 4 decimals
    // and multiplier is any number
    var my_value = original_value * multiplier;
    console.log("typeof my_value is: " + typeof(my_value));
    // adding decimal.js for testing in console
    // var my_decimal_js_value = new Decimal(original_value).times(new Decimal(multiplier));
    // adding 24/06/17, replaces above variable declaration, this rounding will also replace Math.round in addZerosOrNot, (4,7) means 4 decimals places with ROUND_HALF_CEIL rounding, equivalent to Math.round, see: https://mikemcl.github.io/decimal.js/#toDP
    var my_decimal_js_value = new Decimal(original_value).times(new Decimal(multiplier)).toDecimalPlaces(4, 7);
    console.log("typeof my_decimal_js_value is: " + typeof(my_decimal_js_value));
  }

  var result = addZerosOrNot(my_value, "js_only mode");
  var decimal_js_result = addZerosOrNot(my_decimal_js_value, "decimal.js mode");

  console.log("=======================");
  console.log("result:");
 ...