2021-04-21

【JavaScript】input に入力された値を数値として認識・取得する方法。

JavaScript

【JavaScript】input に入力された値を数値として認識・取得する方法。

こんにちは、ダイキです。
今回は、JavaScript で、input に入力された数字を数値として認識して取得する方法をまとめています。

結論を言うと、Number.parseFloat() を使います。
自分なりにググって調べて見たのですが、意外と見つかりませんでした。ですので、参考にどうぞ。

JavaScript です。input に入力された値を数値として認識・取得する方法。


const myButton = document.getElementById('button-add');
const inputNum1 = document.getElementById('num1');
const inputNum2 = document.getElementById('num2');
const box = document.getElementById('box');

myButton.addEventListener('click', () => {
  const num1 = Number.parseFloat(inputNum1.value);
  const num2 = Number.parseFloat(inputNum2.value);
  const result = num1 + num2;
  box.textContent = result;
});

もう一つのパターン。input に入力された値を数値として認識・取得する方法。

Number.parseFloat() の parseFloat() を外しても出来ます。


const myButton = document.getElementById('button-add');
const inputNum1 = document.getElementById('num1');
const inputNum2 = document.getElementById('num2');
const box = document.getElementById('box');

myButton.addEventListener('click', () => {
  const num1 = Number(inputNum1.value);
  const num2 = Number(inputNum2.value);
  const result = num1 + num2;
  box.textContent = result;
});