How can I improve this Javascript calculation tool?

Question

I am making a calculation tool. I am not very familiar with javascript, so my code looks a bit off. What edits should be made to make this tool work? I want the input numbers calculated just like the equation below:

calculate = function()
{
  var x = document.getElementById('a').value;
  var y = document.getElementById('b').value;
  var z = document.getElementById('c').value; 
  document.getElementById('result').value = x * 588 + y * 28 + z + 44032
}

<input type="number" id="a" oninput="calculate()"/> × 588 +
<input type="number" id="b" oninput="calculate()"/> × 28 +
<input type="number" id="c" oninput="calculate()"/> + 44032 =
<input type='text' id="result"/>

Answer 1

• When you use document.getElementById to get an <input /> element it returns a JavaScript object of type HTMLInputElement which has the .value property (which you are using).
• However, the HTMLInputElement.value property returns a string value, not a number value.
  • You might be aware of the valueAsNumber property, however this does not work for <input type="text" /> - only <input type="number" /> (which your HTML is, fortunately), but always check for NaN!
• JavaScript is often described as being "loosely-typed" but I prefer to refer to it as being "wtfy-typed" because its rules for implicit type conversions are inconsistent.
  • A common "feature" in loosely-typed languages like JavaScript and PHP is implicit conversion of string values to number values, but it's best to avoid depending on that behaviour entirely and stick to always explicitly converting string values to number values using parseInt(string,radix), parseFloat(string) or Number(any).

So do this:

var calculate = function()
{
    const x = parseFloat( document.getElementById('a').value );
    const y = parseFloat( document.getElementById('b').value );
    const z = parseFloat( document.getElementById('c').value );
    const o = document.getElementById('result');

    if( isNaN(x) || isNaN(y) || isNaN(z) ) {
        o.value = "Invalid input.";
    }
    else {
        const result = x * 588 + y * 28 + z + 44032;
        o.value = result.toString();
        // If `result` will be fractional then use `toFixed` instead of `toString`.
        // This is to avoid very long string representations of imprecise floating-point numbers due to how IEEE-754 works.
    }
}

input[type=number] {
    text-align: right;
    width: 5em;
}
input#result {
    text-align: right;
    width: 10em;
}

<input type="number" id="a" oninput="calculate()" /> × 588 +
<input type="number" id="b" oninput="calculate()" /> × 28 +
<input type="number" id="c" oninput="calculate()" /> + 44032 =
<input type='text' id="result" readonly />