これをループする方法はありますか？

Question

変数の宣言をループする方法はありますか？私はこれはそれをコーディングする正しい方法ではありません変更の単調な作業に変数

\t var height1 = document.getElementById('height1').value; 
 
\t var height2 = document.getElementById('height2').value; 
 
\t var height3 = document.getElementById('height3').value; 
 
\t var height4 = document.getElementById('height4').value; 
 
\t var height5 = document.getElementById('height5').value; 
 
\t var height6 = document.getElementById('height6').value; 
 
\t var height7 = document.getElementById('height7').value; 
 
\t var height8 = document.getElementById('height8').value; 
 
\t var height9 = document.getElementById('height9').value; 
 
\t var height10 = document.getElementById('height10').value; 
 
\t var height11 = document.getElementById('height11').value; 
 
\t var height12 = document.getElementById('height12').value; 
 
\t var height13 = document.getElementById('height13').value; 
 
\t var height14 = document.getElementById('height14').value; 
 
\t var height15 = document.getElementById('height15').value; 
 
\t var height16 = document.getElementById('height16').value;

Answer 1

の数字を行うには持っていけないので、私はちょうど行い、変数を宣言するのに役立つだけでループ以下のように、

var heights = []; 
Array.from(document.querySelectorAll("input[id^=height]")).forEach(function(itm){ 
    heights.push(itm.value); 
}); 

そして今、あなたはあなたの要件ごとに値を操作する配列heightsを繰り返すことができます。

コードの背後にあるロジックは、heightで始まるIDを持つ入力要素を選択します。querySelectorAll("input[id^=height]")です。 querySelectorAllの戻り値はnodelistなので、配列関数を使用する前にarrayとして変換する必要があります。したがって、Array.from(nodelist)を使用しています。それは私たちのための配列をもたらすでしょう。その後、返された配列に対して、forEachを使用し、すべての要素の値を配列heightsにプッシュすることによって、繰り返し処理しています。

Answer 2

これは、オブジェクトのために良いユースケースのようだ：

var heights = {}; 

for (var i = 1; i <= 16; i++) { 
    heights[i] = document.getElementById('height' + i).value; 
} 

Answer 3

通常は、配列に入れます。

var heights = [] 
for (i = 1; i < 17; i++) { 
    heights[i] = document.getElementById('height' + i).value;; 
} 

heights[0]はそれに何の関係もありません。すなわち、これは、配列の開始時に、あなたに穴を与える注意してください。あなたは

for (var i in heights) { 
    alert(heights[i]); 
} 

Answer 4

...それは問題ではありません反復するためにこれを使用する場合、これはあなたが配列をしたいの表示はほとんど常にあります。このような何か：

var heights = []; 
for (var i = 1; i <= 16; i++) { 
    heights.push(document.getElementById('height' + i).value); 
} 

次に、あなたのようなもので、配列から値を参照することができますJavaScriptで、あなたのウィンドウレベルの変数は、windowオブジェクトのインデックス可能なプロパティですので、技術的にものの

heights[1] 

基本的に変数名自体で同じことをすることができます：

for (var i = 1; i <= 16; i++) { 
    window['height' + i] = document.getElementById('height' + i).value; 
} 

そして、あなたはまだあなたの元の変数を使用することができます。

height1 

ものの、ウィンドウ/グローバルスコープの外で物事を保つの利益のために、配列を維持することは少しクリーナー（と意味的にもっと賢明な）ようです。

Answer 5

多分functionを導入するために、その時間：

は一般的に言えば、関数は、関数へが（再帰の場合、または内部）外部コードによってを呼び出すことができる「サブプログラム」です。プログラム自体と同様に、関数は、関数本体と呼ばれる一連の文で構成されています。値はになり、関数にはが渡され、関数はに戻り、の値を返します。

function getHeight(id) { 
    return document.getElementById(id).value; 
} 

たかっidとの通話や変数のようにそれを使用。

getHeight('height1')