Поддерживают ли браузеры дробное число для поля ввода чисел при умножении двух чисел?

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");

Будет ли браузер определять дробь и умножать ее как обычно?

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

Показывает результат.

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

Answer 1

Браузеры поддерживают дроби в полях ввода чисел. Глядя на пример кода, который вы вставили выше нескольких пунктов, вам нужно изменить:

• Чтобы получить предоставленное число из полей ввода, вам нужно получить свойство value элемента, а не сам элемент.

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

// Should be 

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

• Чтобы преобразовать строку в число с десятичными значениями, используйте parseFloat вместо parseInt, так как последний будет брать только недесятичную часть номер.

• Для обработчика нажатия кнопки вам нужно будет вызвать функцию multNum, а не просто указать ее имя.

Вот полный пример, основанный на вашем примере кода.

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>

Answer 2

Это легко проверить, просто запустив несколько строк кода HTML и JS:

Ответ: Нет . Браузеры не идентифицируют дроби вообще. Это можно увидеть во втором фрагменте. Во-первых, JS обрабатывает дробь как выражение деления, преобразуя ее в десятичные дроби. В некотором смысле, вы не можете иметь дроби в JS

Делит и дает десятичные дроби:

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>

Строки со значением дроби наподобие «1/2» не работают:

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>

Это ваш ответ, теперь для умножения.

// 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>