I've been trying to round my digits to the nearest thousandth in JavaScript for a calculator, and it has, but it still displays the decimal points which have 0 as their value in the end, but I want to limit it down to the nearest number with a value. (I want it to limit down like such: 100.000 -> 100, 948.500 -> 948.5, etc.) Is there any way to limit the extra place holders being displayed instead of displaying the 0's?

function getInputValue() {
  // Selecting the input element and get its value 
  var y2 = document.getElementById("input1").value;
  var y1 = document.getElementById("input2").value;
  var x2 = document.getElementById("input3").value;
  var x1 = document.getElementById("input4").value;

  let total = (y2 - y1) / (x2 - x1);

  total = total.toFixed(4);
};

I have already tried to use other rounding methods, but they didn't round as expected.

CodePudding user response：

You have a few problems that you can break down:

1. How to format a number with/without fractional precision
2. How to calculate the slope from two points
3. How to obtain input values

Work each problem out one-by-one.

Figure out a way to determine if a number is a natural (whole) number or a real (fractional) number. Also, create a function that can calculate a slope given two points without formatting. It should just be responsible for calculating a numerical result.

Update: You can trim-off the training zero fractional digits with the following regular expression:

/(?<=\.\d*)0*$/

const
  inputX1 = document.querySelector('#x1'),
  inputY1 = document.querySelector('#y1'),
  inputX2 = document.querySelector('#x2'),
  inputY2 = document.querySelector('#y2');

// Credit: https://stackoverflow.com/a/73124787/1762224
const formatNumber = (n, precision = 4) =>
  !Number.isInteger(n) && Number.isFinite(n) ?
    n.toFixed(4, precision).replace(/(?<=\.\d*)0*$/, '') :
    n;

console.log(formatNumber(100));     // 100
console.log(formatNumber(948.500)); // 948.5
console.log(formatNumber(948.0));   // 948
console.log(formatNumber(0.25));    // 0.25

const slope = (x1, y1, x2, y2) => (y2 - y1) / (x2 - x1);

const calculate = () => {
  console.log(formatNumber(slope(
    inputX1.valueAsNumber,
    inputY1.valueAsNumber,
    inputX2.valueAsNumber,
    inputY2.valueAsNumber
  )));
};


calculate(); // 15.6154

.as-console-wrapper { max-height: 8rem !important; }
html, body { width: 100%; height: 100%; }
body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.5rem; }
body > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 0.5rem; }
label > span { font-weight: bold; }
label > input { width: 8ch; }

<div>
  <label>
    <span>x1</span>
    <input id="x1" type="number" value="-50" step="0.1" />
  </label>
  <label>
    <span>y1</span>
    <input id="y1" type="number" value="-2000" step="0.1" />
  </label>
  <label>
    <span>x2</span>
    <input id="x2" type="number" value="80" step="0.1" />
  </label>
  <label>
    <span>y1</span>
    <input id="y2" type="number" value="30" step="0.1" />
  </label>
</div>
<button type="button" onClick="calculate()">Recalculate</button>