回答編集履歴
6
テキスト修正
answer
CHANGED
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
|
|
33
33
|
参考になれば幸いです。
|
|
34
34
|
|
|
35
|
-
#### 追記
|
|
35
|
+
#### 追記1
|
|
36
36
|
|
|
37
|
-
まとめるオブジェクトとして、[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使うと、上記のコードで [Array.prototype.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) に渡す関数を、以下のように短く書けます。
|
|
37
|
+
まとめるオブジェクトとして、[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使うと、上記のコードで [Array.prototype.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) に渡す関数を、以下のように少し短く書けます。
|
|
38
38
|
|
|
39
39
|
```javascript
|
|
40
40
|
const values = Array.prototype.reduce.call(
|
5
テキスト修正
answer
CHANGED
|
@@ -70,4 +70,36 @@
|
|
|
70
70
|
|
|
71
71
|
- 上記コードのサンプル: [https://jsfiddle.net/jun68ykt/xhnt7cp9/3/](https://jsfiddle.net/jun68ykt/xhnt7cp9/3/)
|
|
72
72
|
|
|
73
|
-
ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト（ブラウザでは `window`）のプロパティに、値を保存をしておくようなことは、あまりやりません。
|
|
73
|
+
ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト（ブラウザでは `window`）のプロパティに、値を保存をしておくようなことは、あまりやりません。
|
|
74
|
+
|
|
75
|
+
#### 追記3
|
|
76
|
+
|
|
77
|
+
蛇足ではありますが、もうひとつお節介ついでに、「こうすればまとめるプログラムを書かなくても、最初からまとまっているといえるのでは？」という例を挙げます。
|
|
78
|
+
|
|
79
|
+
以下のように`<input>`要素を `<form>` でくくっておき、`<input>` には id ではなく name 属性を付加しておきます。
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<form>
|
|
83
|
+
<input name="num1" value="10" /><br />
|
|
84
|
+
<input name="num2" value="11" /><br />
|
|
85
|
+
<input name="num3" value="12" /><br />
|
|
86
|
+
<input name="num4" value="13" /><br />
|
|
87
|
+
<input name="num5" value="14" /><br />
|
|
88
|
+
<input name="num6" value="15" /><br />
|
|
89
|
+
<input name="num7" value="16" /><br />
|
|
90
|
+
<input name="num8" value="17" /><br />
|
|
91
|
+
<input name="num9" value="18" /><br />
|
|
92
|
+
<input name="num10" value="19" />
|
|
93
|
+
</form>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
上記のようにすると、以下で値が取り出せます。
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
const f = document.forms[0];
|
|
100
|
+
|
|
101
|
+
console.log(f.num1.value); // => 10
|
|
102
|
+
console.log(f.num10.value); // => 19
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/1mhcj7k3/3/](https://jsfiddle.net/jun68ykt/1mhcj7k3/3/)
|
4
テキスト修正
answer
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
#### 追記2
|
|
50
50
|
|
|
51
|
-
質問への追記・修正に
|
|
51
|
+
質問への追記・修正のご返信に、
|
|
52
52
|
|
|
53
53
|
> mi_mi 2018/10/22 16:38
|
|
54
54
|
> ...
|
3
テキスト修正
answer
CHANGED
|
@@ -44,4 +44,30 @@
|
|
|
44
44
|
);
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
- 上記のコードのサンプル： [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
|
|
47
|
+
- 上記のコードのサンプル： [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
|
|
48
|
+
|
|
49
|
+
#### 追記2
|
|
50
|
+
|
|
51
|
+
質問への追記・修正にて
|
|
52
|
+
|
|
53
|
+
> mi_mi 2018/10/22 16:38
|
|
54
|
+
> ...
|
|
55
|
+
> var num1v = document.getElementById("num1").valueの num1vの部分も使用できるようにしたいです。 例えばconsole.log(num1v）で値が表示されるような。
|
|
56
|
+
|
|
57
|
+
とありましたが、以下のようにすると、 `console.log(num1v);` で `id="num1"` の要素の value が表示されるようにできます。
|
|
58
|
+
|
|
59
|
+
```javascript
|
|
60
|
+
Array.prototype.forEach.call(
|
|
61
|
+
document.getElementsByTagName('input'),
|
|
62
|
+
input => {
|
|
63
|
+
window[`${input.id}v`] = input.value;
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
console.log(num1v);
|
|
68
|
+
console.log(num10v);
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
- 上記コードのサンプル: [https://jsfiddle.net/jun68ykt/xhnt7cp9/3/](https://jsfiddle.net/jun68ykt/xhnt7cp9/3/)
|
|
72
|
+
|
|
73
|
+
ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト（ブラウザでは `window`）のプロパティに、値を保存をしておくようなことは、あまりやりません。
|
2
テキスト修正
answer
CHANGED
|
@@ -30,4 +30,18 @@
|
|
|
30
30
|
|
|
31
31
|
- [https://jsfiddle.net/jun68ykt/mbz8x97g/3/](https://jsfiddle.net/jun68ykt/mbz8x97g/3/)
|
|
32
32
|
|
|
33
|
-
参考になれば幸いです。
|
|
33
|
+
参考になれば幸いです。
|
|
34
|
+
|
|
35
|
+
#### 追記
|
|
36
|
+
|
|
37
|
+
まとめるオブジェクトとして、[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) を使うと、上記のコードで [Array.prototype.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) に渡す関数を、以下のように短く書けます。
|
|
38
|
+
|
|
39
|
+
```javascript
|
|
40
|
+
const values = Array.prototype.reduce.call(
|
|
41
|
+
document.getElementsByTagName('input'),
|
|
42
|
+
(m, input) => m.set(input.id, input.value),
|
|
43
|
+
new Map()
|
|
44
|
+
);
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
- 上記のコードのサンプル： [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
|
1
テキスト修正
answer
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
とのご返答を頂きましたので、上記の趣旨のコード例を以下に回答します。
|
|
14
14
|
|
|
15
15
|
```javascript
|
|
16
|
-
|
|
16
|
+
const values = Array.prototype.reduce.call(
|
|
17
17
|
document.getElementsByTagName('input'),
|
|
18
18
|
(obj, input) => {
|
|
19
19
|
obj[input.id] = input.value;
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
|
|
29
29
|
以下は、上記のコードを確認するためのサンプルです。（HTMLの部分はJavaScriptの動作確認できるように適当なものを作成しました）
|
|
30
30
|
|
|
31
|
-
- [https://jsfiddle.net/jun68ykt/mbz8x97g/
|
|
31
|
+
- [https://jsfiddle.net/jun68ykt/mbz8x97g/3/](https://jsfiddle.net/jun68ykt/mbz8x97g/3/)
|
|
32
32
|
|
|
33
33
|
参考になれば幸いです。
|