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

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

ただいまの
回答率

87.90%

テキストに入力された値を取得する複数の変数宣言をfor文でまとめたい

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 1,234

score 19

  var num1v = document.getElementById("num1").value;
  var num2v = document.getElementById("num2").value;
  var num3v = document.getElementById("num3").value;
  var num4v = document.getElementById("num4").value;
  var num5v = document.getElementById("num5").value;
  var num6v = document.getElementById("num6").value;
  var num7v = document.getElementById("num7").value;
  var num8v = document.getElementById("num8").value;
  var num9v = document.getElementById("num9").value;
  var num10v = document.getElementById("num10").value;
  for ( var i = 1; i < num.length +1 ; i++ )//上記をfor文でまとめたい
  {
    var y = 'var num'+[i]+'v'+ '= document.getElementById("num'+[i]+'").value;'
    console.log(y);//コンソールログには上記の通りに出力されるが、正しく宣言されていないようで値の取得ができない
  }

  console.log(num1v);//for文を使うとエラーになってしまう。長いが、上記で宣言すると問題なく取得する事ができる。

・やりたい事
テキストに入力された値を取得する変数宣言が長いのでfor文でまとめたい

・やってみた事
for文で宣言を作成しようとしたのですが、正しく宣言されていないようで値の取得ができない。
forと配列等があまり理解できていないのかもしれません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • jun68ykt

    2018/10/22 16:23

    こんにちは。num1, num2 ... をプロパティとするオブジェクトを作成する回答を書こうと思ったのですが for 文を使わない回答もアリでしょうか?

    キャンセル

  • mi_mi

    2018/10/22 16:38

    ありです。 宣言が長くなってしまったのでまとめて宣言をしたいので、 色々な方法を見てみたいです。 var num1v = document.getElementById("num1").valueの num1vの部分も使用できるようにしたいです。 例えばconsole.log(num1v)で値が表示されるような。 初心者のイメージとしては本当に最初に記載した通りのfor文で できるかなと思ったのですが、難しいです。 皆さんに教えていただいた方法を試してみています。

    キャンセル

  • jun68ykt

    2018/10/22 17:16

    ご返信ありがとうございます。コード例を回答しました。

    キャンセル

回答 5

+3

よほど理由がない限り、「ループでまとめて使う変数群」は配列を使って表現するのが適切です。

JavaScriptでは、状況によっては「プログラムで指定した名前の変数」を造るのが不可能なこともあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 15:28

    そうなんですね。ありがとうございます。

    もしご面倒でなければ、どのようなコードになるか教えていただけませんでしょうか?
    自分で思いつくものが上記以外にないので教えていただけると幸いです。

    キャンセル

  • 2018/10/22 15:35

    x_xさんが示しているコードが、ちょうどそんな感じです。

    キャンセル

  • 2018/10/22 23:16

    maisumakunさんありがとうございました。

    キャンセル

+2

変数numが不明だったので固定値にしてますが

  var y = [];
  for ( var i = 1; i <= 10 ; i++ ) {
    y.push(document.getElementById('num' + i.toString()).value);
  }

  console.log(y);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 23:17

    x_x さんありがとうございました。
    配列となって取り出せるので、とても便利ですね。
    pushの使い方が分かっていなかったので今回とても勉強になりました。

    キャンセル

checkベストアンサー

+1

こんにちは。

質問への追記・修正にて、当方からの

jun68ykt 2018/10/22 16:23
こんにちは。num1, num2 ... をプロパティとするオブジェクトを作成する回答を書こうと思ったのですが for 文を使わない回答もアリでしょうか?

との確認に

mi_mi 2018/10/22 16:38
ありです。 宣言が長くなってしまったのでまとめて宣言をしたいので、 色々な方法を見てみたいです。 ...

とのご返答を頂きましたので、上記の趣旨のコード例を以下に回答します。

const values = Array.prototype.reduce.call(
    document.getElementsByTagName('input'), 
    (obj, input) => {
        obj[input.id] = input.value;
        return obj;
    }, 
    {}
);

上記のように values を作成すると、 たとえば values.num1 することで、 id が "num1" の要素の value 属性の値を取り出せます。

以下は、上記のコードを確認するためのサンプルです。(HTMLの部分はJavaScriptの動作確認できるように適当なものを作成しました)

参考になれば幸いです。

 追記1

まとめるオブジェクトとして、Map を使うと、上記のコードで Array.prototype.reduce に渡す関数を、以下のように少し短く書けます。

const values = Array.prototype.reduce.call(
    document.getElementsByTagName('input'), 
    (m, input) => m.set(input.id, input.value),
    new Map()
);

 追記2

質問への追記・修正のご返信に、

mi_mi 2018/10/22 16:38
...
var num1v = document.getElementById("num1").valueの num1vの部分も使用できるようにしたいです。 例えばconsole.log(num1v)で値が表示されるような。 

とありましたが、以下のようにすると、 console.log(num1v); で id="num1" の要素の value が表示されるようにできます。

Array.prototype.forEach.call(
    document.getElementsByTagName('input'), 
    input => {
      window[`${input.id}v`] = input.value;
    } 
);

console.log(num1v);
console.log(num10v);

ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト(ブラウザでは window)のプロパティに、値を保存をしておくようなことは、あまりやりません。

 追記3

蛇足ではありますが、もうひとつお節介ついでに、「こうすればまとめるプログラムを書かなくても、最初からまとまっているといえるのでは?」という例を挙げます。

以下のように<input>要素を <form> でくくっておき、<input> には id ではなく name 属性を付加しておきます。

<form>
  <input name="num1" value="10" /><br />
  <input name="num2" value="11" /><br />
  <input name="num3" value="12" /><br />
  <input name="num4" value="13" /><br />
  <input name="num5" value="14" /><br />
  <input name="num6" value="15" /><br />
  <input name="num7" value="16" /><br />
  <input name="num8" value="17" /><br />
  <input name="num9" value="18" /><br />
  <input name="num10" value="19" />
</form>

上記のようにすると、以下で値が取り出せます。

const f = document.forms[0];

console.log(f.num1.value);  // => 10
console.log(f.num10.value);  // => 19

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 23:25

    jun68yktさん沢山ご回答いただきありがとうございました。
    ご丁寧にサンプルまで!初心者なのでサンプルをいただけると大変嬉しいです!
    name属性で取り出す方法全く知らなかったので驚いています。
    全部試してみています。動いて嬉しいです!

    キャンセル

  • 2018/10/22 23:35

    どういたしまして、お役に立てて嬉しいです 👍

    キャンセル

+1

こんなかんじ。でも、場合によっては殴られるレベルのコード。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="num1">NUM1</div>
<div id="num2">NUM2</div>
<div id="num3">NUM3</div>

<script>
 var num = 3;
 for (var i = 1; i <num+1 ; i++ )//上記をfor文でまとめたい
  {
    var valName = "num" + i + "v";
    var id = "num" + i;
    var exp = "var " + valName + " = document.getElementById('" + id + "').textContent;"
    eval(exp);
    console.log(eval(valName));
  }

</script>
</body>
</html>

なので、やっぱりこんなかんじ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="num1">NUM1</div>
<div id="num2">NUM2</div>
<div id="num3">NUM3</div>

<script>
  var elems = [];
  var num = 3;
  for (var i = 1; i <num+1 ; i++ )//上記をfor文でまとめたい
  {
    var id = 'num' + i;
    elems[i] = document.getElementById(id).textContent;
    console.log(elems[i]);
  }
</script>
</body>
</html>

変数を動的に追加すると、コードにgrepかけたときに(変数を調べたときに)、検索に引っかからないので、場合によっては吐血する羽目になります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 23:20

    ppnさんありがとうございました。
    最初に殴られるレべルのコードを書いていただいたので、
    私にはとてもわかりやすかったです。皆さんに色んな書き方を教えていただいて嬉しいです。

    キャンセル

0

たとえば規則性が保証できない場合または
一部だけ処理したい場合はこんな感じで

var items = ['num1','num2','num3','etc'];
var vals = [];
for(var x in items) {
  vals[x] = document.getElementById(x).value;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 23:43

    ありゃ。解決済みでしたか。失礼 :-)

    キャンセル

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

  • ただいまの回答率 87.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る