input要素から数値を取得する方法を教えてください。

Question

前提・実現したいこと

簡単な計算をするアプリを作るために、HTMLのinputから数値を取得し、計算した結果をHTMLに返したいのですが、コンソールにinput要素がそのまま出力されます。
数値として取得するにはどうしたらよいでしょうか。

発生している問題

<input type="number" id="c" value="1">
<input type="number" id="i" value="1">
<input type="number" id="g" value="1">
<input type="number" id="x" value="1">
<input type="number" id="m" value="1">

[object HTMLInputElement][object HTMLInputElement][object HTMLInputElement]

該当のソースコード

  <div id="input">
    <p id="moji cc">民間消費（C）</p><input type="number" id="c" value="1">
    <p id="moji ii">民間投資（I）</p><input type="number" id="i" value="1">
    <p id="moji gg">政府支出（G）</p><input type="number" id="g" value="1">
    <p id="moji xx">輸出（X）</p><input type="number" id="x" value="1">
    <p id="moji mm">輸入（M）</p><input type="number" id="m" value="1">
  </div>
  <button id="keisan">
    <p id="keisansuru">計算する</p>
  </button>
  <p id="output"></p>

function math(){
  var c = document.getElementById("c");
  console.log(c);
  var i = document.getElementById("i");
  console.log(i);
  var g = document.getElementById("g");
  console.log(g);
  var x = document.getElementById("x");
  console.log(x);
  var m = document.getElementById("m");
  console.log(m);
  var num = x - m;
  return c + i + g + num;
};

document.getElementById("keisan").onclick = function(){
  var y = math();
  document.getElementById("output").textContent = y;
};

試したこと

JavaScriptのParseIntを使用してみたり、inputのtype要素をtelにしてみたりしましたが、何も変わりませんでした。
（NaNになるくらいでした）

Comments

[hoshi-takanori]

input 要素の value プロパティを取得して、数値に変換すれば良いのでは。

[m.ts10806]

コメント見る前に回答してしまった。
hoshi-takanoriさんそれもう回答でいいのでは

Answer 1

getElementなので、要素そのものを取得するだけです。
リファレンスにもid プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返しますとあります。どこにも「value属性の値を返す」とありません（そもそもgetElement**で指定されるのは入力コントロールだけとは限らない）。

value属性は要素が持っている情報（プロパティ）なので、またそこから辿ってください。
input

要素のプロパティの取得方法で調べてください。
あと、属性値は基本「文字列」で取得されるので、文字列以外で使いたいなら使いたい形式に型変換して利用。

Comments

[Ryo-04]

わ、value要素で取得するのは盲点でした。
```getElementById("c").value;```にしただけで解決しました。
お手数おかけしました。

[m.ts10806]

＞value要素で取得するのは盲点でした。
関数が何を返すか調べたら明白と思います。
回答に書いた通り、inputにしか使わないわけではないですし、
そこまで「いいかんじにしてくれるもの」ってないです。
「要素返しておくからあとは好きに使ってね」です。（関数自作する際も同じ設計思想になると思います）