回答編集履歴
6
テキスト修正
test
CHANGED
|
@@ -66,11 +66,11 @@
|
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
#### 追記
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
まとめるオブジェクトとして、[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) に渡す関数を、以下のように短く書けます。
|
|
69
|
+
#### 追記1
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
まとめるオブジェクトとして、[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) に渡す関数を、以下のように少し短く書けます。
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
|
5
テキスト修正
test
CHANGED
|
@@ -143,3 +143,67 @@
|
|
|
143
143
|
|
|
144
144
|
|
|
145
145
|
ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト（ブラウザでは `window`）のプロパティに、値を保存をしておくようなことは、あまりやりません。
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
#### 追記3
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
蛇足ではありますが、もうひとつお節介ついでに、「こうすればまとめるプログラムを書かなくても、最初からまとまっているといえるのでは？」という例を挙げます。
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
以下のように`<input>`要素を `<form>` でくくっておき、`<input>` には id ではなく name 属性を付加しておきます。
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
|
|
163
|
+
<form>
|
|
164
|
+
|
|
165
|
+
<input name="num1" value="10" /><br />
|
|
166
|
+
|
|
167
|
+
<input name="num2" value="11" /><br />
|
|
168
|
+
|
|
169
|
+
<input name="num3" value="12" /><br />
|
|
170
|
+
|
|
171
|
+
<input name="num4" value="13" /><br />
|
|
172
|
+
|
|
173
|
+
<input name="num5" value="14" /><br />
|
|
174
|
+
|
|
175
|
+
<input name="num6" value="15" /><br />
|
|
176
|
+
|
|
177
|
+
<input name="num7" value="16" /><br />
|
|
178
|
+
|
|
179
|
+
<input name="num8" value="17" /><br />
|
|
180
|
+
|
|
181
|
+
<input name="num9" value="18" /><br />
|
|
182
|
+
|
|
183
|
+
<input name="num10" value="19" />
|
|
184
|
+
|
|
185
|
+
</form>
|
|
186
|
+
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
上記のようにすると、以下で値が取り出せます。
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
```javascript
|
|
196
|
+
|
|
197
|
+
const f = document.forms[0];
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
console.log(f.num1.value); // => 10
|
|
202
|
+
|
|
203
|
+
console.log(f.num10.value); // => 19
|
|
204
|
+
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
- 上記のサンプル： [https://jsfiddle.net/jun68ykt/1mhcj7k3/3/](https://jsfiddle.net/jun68ykt/1mhcj7k3/3/)
|
4
テキスト修正
test
CHANGED
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
101
|
-
質問への追記・修正に
|
|
101
|
+
質問への追記・修正のご返信に、
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
3
テキスト修正
test
CHANGED
|
@@ -91,3 +91,55 @@
|
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
- 上記のコードのサンプル： [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
#### 追記2
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
質問への追記・修正にて
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
> mi_mi 2018/10/22 16:38
|
|
106
|
+
|
|
107
|
+
> ...
|
|
108
|
+
|
|
109
|
+
> var num1v = document.getElementById("num1").valueの num1vの部分も使用できるようにしたいです。 例えばconsole.log(num1v）で値が表示されるような。
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
とありましたが、以下のようにすると、 `console.log(num1v);` で `id="num1"` の要素の value が表示されるようにできます。
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
```javascript
|
|
118
|
+
|
|
119
|
+
Array.prototype.forEach.call(
|
|
120
|
+
|
|
121
|
+
document.getElementsByTagName('input'),
|
|
122
|
+
|
|
123
|
+
input => {
|
|
124
|
+
|
|
125
|
+
window[`${input.id}v`] = input.value;
|
|
126
|
+
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
console.log(num1v);
|
|
134
|
+
|
|
135
|
+
console.log(num10v);
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
- 上記コードのサンプル: [https://jsfiddle.net/jun68ykt/xhnt7cp9/3/](https://jsfiddle.net/jun68ykt/xhnt7cp9/3/)
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
ただし、上記のようにすると「いちおう出来ます」というだけで、グローバルオブジェクト（ブラウザでは `window`）のプロパティに、値を保存をしておくようなことは、あまりやりません。
|
2
テキスト修正
test
CHANGED
|
@@ -63,3 +63,31 @@
|
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
参考になれば幸いです。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
#### 追記
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
まとめるオブジェクトとして、[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) に渡す関数を、以下のように短く書けます。
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
|
|
79
|
+
const values = Array.prototype.reduce.call(
|
|
80
|
+
|
|
81
|
+
document.getElementsByTagName('input'),
|
|
82
|
+
|
|
83
|
+
(m, input) => m.set(input.id, input.value),
|
|
84
|
+
|
|
85
|
+
new Map()
|
|
86
|
+
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
- 上記のコードのサンプル： [https://jsfiddle.net/jun68ykt/g4hk9t81/1/](https://jsfiddle.net/jun68ykt/g4hk9t81/1/)
|
1
テキスト修正
test
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
```javascript
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
const values = Array.prototype.reduce.call(
|
|
32
32
|
|
|
33
33
|
document.getElementsByTagName('input'),
|
|
34
34
|
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
61
|
-
- [https://jsfiddle.net/jun68ykt/mbz8x97g/
|
|
61
|
+
- [https://jsfiddle.net/jun68ykt/mbz8x97g/3/](https://jsfiddle.net/jun68ykt/mbz8x97g/3/)
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
|