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

Question

  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文で宣言を作成しようとしたのですが、正しく宣言されていないようで値の取得ができない。
ｆorと配列等があまり理解できていないのかもしれません。

Comments

[jun68ykt]

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

[mi_mi]

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

[jun68ykt]

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

Answer 1

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

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

Comments

[mi_mi]

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

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

[maisumakun]

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

[mi_mi]

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

Answer 2

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

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

  console.log(y);

Comments

[mi_mi]

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

Answer 3

こんにちは。

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

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の動作確認できるように適当なものを作成しました）

• https://jsfiddle.net/jun68ykt/mbz8x97g/3/

参考になれば幸いです。

追記1

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

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

• 上記のコードのサンプル： https://jsfiddle.net/jun68ykt/g4hk9t81/1/

追記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);

• 上記コードのサンプル: https://jsfiddle.net/jun68ykt/xhnt7cp9/3/

ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト（ブラウザでは 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

• 上記のサンプル： https://jsfiddle.net/jun68ykt/1mhcj7k3/3/

Comments

[mi_mi]

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

[jun68ykt]

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

Answer 4

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

<!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かけたときに(変数を調べたときに)、検索に引っかからないので、場合によっては吐血する羽目になります。

Comments

[mi_mi]

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

Answer 5

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

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

Comments

[takasima20]

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