質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
標準出力

標準出力(stdout)は、プログラムが標準的に用いるデータ出力元。標準出力に書き込み要求を発行しすることにより、ディスプレイ装置にデータを表示することができます。UNIX系OSやC言語に実装されて普及した概念ですが、他のOSや言語も含めた総称としても使われます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3515閲覧

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

Ryo-04

総合スコア4

標準出力

標準出力(stdout)は、プログラムが標準的に用いるデータ出力元。標準出力に書き込み要求を発行しすることにより、ディスプレイ装置にデータを表示することができます。UNIX系OSやC言語に実装されて普及した概念ですが、他のOSや言語も含めた総称としても使われます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/01/10 22:24

前提・実現したいこと

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

発生している問題

Console

1<input type="number" id="c" value="1"> 2<input type="number" id="i" value="1"> 3<input type="number" id="g" value="1"> 4<input type="number" id="x" value="1"> 5<input type="number" id="m" value="1">

output

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

該当のソースコード

HTML

1 2 <div id="input"> 3 <p id="moji cc">民間消費(C)</p><input type="number" id="c" value="1"> 4 <p id="moji ii">民間投資(I)</p><input type="number" id="i" value="1"> 5 <p id="moji gg">政府支出(G)</p><input type="number" id="g" value="1"> 6 <p id="moji xx">輸出(X)</p><input type="number" id="x" value="1"> 7 <p id="moji mm">輸入(M)</p><input type="number" id="m" value="1"> 8 </div> 9 <button id="keisan"> 10 <p id="keisansuru">計算する</p> 11 </button> 12 <p id="output"></p> 13

JavaScript

1function math(){ 2 var c = document.getElementById("c"); 3 console.log(c); 4 var i = document.getElementById("i"); 5 console.log(i); 6 var g = document.getElementById("g"); 7 console.log(g); 8 var x = document.getElementById("x"); 9 console.log(x); 10 var m = document.getElementById("m"); 11 console.log(m); 12 var num = x - m; 13 return c + i + g + num; 14}; 15 16document.getElementById("keisan").onclick = function(){ 17 var y = math(); 18 document.getElementById("output").textContent = y; 19};

試したこと

JavaScriptParseIntを使用してみたり、inputtype要素をtelにしてみたりしましたが、何も変わりませんでした。
(NaNになるくらいでした)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2022/01/10 22:26

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

2022/01/10 22:33

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

回答1

0

ベストアンサー

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

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

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

投稿2022/01/10 22:32

編集2022/01/10 22:36
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ryo-04

2022/01/10 22:39

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

2022/01/10 22:41

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問