Do browsers support a fraction for a number input box when multiplying two numbers?

Question

<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="multNum">Multiply</button>
<p id="result">This is your result</p>
<script>
function multNum(){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");

Will the browser identify a fraction and multiply it as normal?

var result = parseInt(num1) * parseInt(num2);

This shows the result.

document.getElementById("result").innerHTML = result;
}
</script>

if you are multiplying two strings a parseInt won't be necessary because the browser will cast the operands as float numbers — Fabrizio Calderan, Apr 08 '20 at 07:32
input value is always a string. Even if you type `1`, it will be read as `"1"` in the script. That's why you need to use `parseInt`, to convert `"1"` into `1`. If you type `3/8`, it will be read as `"3/8"` (as a string). `parseInt` and `parseFloat` don't understand fractions, they will just return `3`. Have a look at [this question](https://stackoverflow.com/questions/7142657/convert-fraction-string-to-decimal) — Jeremy Thille, Apr 08 '20 at 07:37
@JeremyThille `parseInt` converts to an Integer *always*, so `Number` is better. — Angshu31, Apr 08 '20 at 07:48

Angshu31 · Answer 1 · 2020-04-08T07:57:34.030

That can easily be checked by just running a few lines of HTML and JS code:

The answer is No. Browsers do not identify fractions at all. This can be seen in the second snippet. For the first, JS works the fraction out as just a divide statement, converting to decimals. In a sense, you cannot have fractions in JS

Divides and gives decimals:

let el1 = document.getElementById("num1"); // HTML Elements
let el2 = document.getElementById("num2");

el1.value = 1/2 // 0.5
el2.value = 1/3 // 0.3333333333333333

let res = Number(el1.value) + Number(el2.value);
document.getElementById("result").innerHTML = res;

<input type="number" id="num1" />
<input type="number" id="num2" />

<div id="result"></div>

Strings with a fraction value like "1/2" don't work:

let el1 = document.getElementById("num1"); // HTML Elements
let el2 = document.getElementById("num2");

el1.value = "1/2" // Does nothing
el2.value = "1/3" // Does nothing

// res = 0
let res = Number(el1.value) + Number(el2.value);
document.getElementById("result").innerHTML = res;

<input type="number" id="num1" />
<input type="number" id="num2" />

<div id="result"></div>

That's your answer, now for the multiply thing.

// OnClick event for the Multiply button
function multNum() {

  // The values, not the elements
  let num1 = document.getElementById("num1").value;
  let num2 = document.getElementById("num2").value;
  
  // `Number` to get strings to floats or integers
  let res = Number(num1) + Number(num2);
  document.getElementById("res").innerHTML = res;
}

<input type="number" id="num1">
<input type="number" id="num2">
<input type="button" onclick="multNum()" value="Multiply">

<div id="res"></div>

score 0 · Accepted Answer · answered Apr 08 '20 at 07:47

Browsers do support fractions in number input boxes. Looking into the sample code you pasted above a few points you need change:

To get the provided number from the input boxes you need to get the value property of the element, not the element itself.

var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");

// Should be 

var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;

To convert a string to a number with decimal values use parseFloat instead of parseInt, as the later will only pick up the non-decimal part of the number.
For the click handler of the button, you will need to call the function multNum not just simply provide its name.

Here is a complete example based on your sample code.

function multNum(){
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;

  var result = parseFloat(num1) * parseFloat(num2);
  document.getElementById("result").innerHTML = result;
}

  
<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="multNum()">Multiply</button>
<p id="result">This is your result</p>

Do browsers support a fraction for a number input box when multiplying two numbers?

2 Answers2