teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問addEventLisner　同じ名前の選択した要素のみををイベントを発生させたい

編集履歴

質問編集履歴

2

コードの修正２

2021/03/17 01:50

投稿

rei78087487
rei78087487

スコア12

test CHANGED
File without changes
test CHANGED
@@ -84,14 +84,12 @@
84
84
 
85
85
 
86
86
 
87
-
87
+ ```JavaScript
88
88
 
89
89
  ***************************************イベント処理********************************
90
90
 
91
91
 
92
92
 
93
- ```JavaScript
94
-
95
93
  // 要素の作成
96
94
 
97
95
  const doubleClick = (e) => {

1

codeの修正

2021/03/17 01:50

投稿

rei78087487
rei78087487

スコア12

test CHANGED
File without changes
test CHANGED
@@ -90,7 +90,9 @@
90
90
 
91
91
 
92
92
 
93
+ ```JavaScript
94
+
93
- ```// 要素の作成
95
+ // 要素の作成
94
96
 
95
97
  const doubleClick = (e) => {
96
98
 
@@ -98,31 +100,31 @@
98
100
 
99
101
  obj.elm.classList.add('child');
100
102
 
101
-
102
-
103
103
  const combine = obj.elm;
104
104
 
105
+
106
+
105
- combine.onchange = () => {
107
+ combine.onchange = () => {
106
-
108
+
107
- if(combine.value !== "") {
109
+ if(combine.value !== "") {
108
-
110
+
109
- combine.style.backgroundColor = 'transparent';
111
+ combine.style.backgroundColor = 'transparent';
110
-
112
+
111
- combine.style.border = 'none';
113
+ combine.style.border = 'none';
112
-
114
+
113
- combine.style.resize = 'none';
115
+ combine.style.resize = 'none';
114
-
116
+
115
- } else {
117
+ } else {
116
-
118
+
117
- combine.style.backgroundColor = 'white';
119
+ combine.style.backgroundColor = 'white';
118
-
120
+
119
- combine.style.border = 'solid';
121
+ combine.style.border = 'solid';
120
-
122
+
121
- combine.style.borderWidth = 'thin';
123
+ combine.style.borderWidth = 'thin';
122
-
124
+
123
- }
125
+ }
124
-
126
+
125
- }
127
+ }
126
128
 
127
129
  elment.appendChild(obj.elm);
128
130
 
@@ -136,42 +138,44 @@
136
138
 
137
139
 
138
140
 
141
+
142
+
139
143
  // 右クリックメニュー
140
144
 
141
145
  const contextMenu = (e) => {
142
146
 
143
- const rightClick = document.querySelector('.menu');
147
+ const rightClick = document.querySelector('.menu');
144
-
148
+
145
- let t = e.target;
149
+ let t = e.target;
146
-
150
+
147
- if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
151
+ if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
148
-
152
+
149
- rightClick.style.display = "block";
153
+ rightClick.style.display = "block";
150
154
 
151
155
 
152
156
 
153
- if(t.getBoundingClientRect().top > 216) {
157
+ if(t.getBoundingClientRect().top > 216) {
154
-
158
+
155
- rightClick.style.left = t.getBoundingClientRect().left + 'px';
159
+ rightClick.style.left = t.getBoundingClientRect().left + 'px';
156
-
160
+
157
- rightClick.style.top =t.getBoundingClientRect().top - 216 + 'px';
161
+ rightClick.style.top =t.getBoundingClientRect().top - 216 + 'px';
158
-
162
+
159
- } else {
163
+ } else {
160
-
164
+
161
- rightClick.style.left = t.getBoundingClientRect().left + 'px';
165
+ rightClick.style.left = t.getBoundingClientRect().left + 'px';
162
-
166
+
163
- rightClick.style.top =t.getBoundingClientRect().top + 30 + 'px';
167
+ rightClick.style.top =t.getBoundingClientRect().top + 30 + 'px';
164
-
168
+
165
- }
169
+ }
166
170
 
167
171
  };
168
172
 
169
173
 
170
174
 
175
+
176
+
171
177
  // 文字の大きさメニュー　右クリック➡文字の大きさ➡文字の大きさメニュー表示
172
178
 
173
-
174
-
175
179
  const mouseMove2 = () => {
176
180
 
177
181
  fontMenu.style.display = "block";
@@ -182,41 +186,107 @@
182
186
 
183
187
 
184
188
 
189
+
190
+
185
191
  // 文字の大きさメニュー 矢印↑クリック
186
192
 
187
-
188
-
189
193
  const contextMenu2 = (e) => {
190
194
 
191
-
195
+ let t = event.target;
196
+
197
+ const test = t;
198
+
199
+ if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
192
200
 
193
201
 
194
202
 
203
+ fontUp.addEventListener('click', (e) => {
204
+
205
+ if(inputFont.value >= 64) {
206
+
207
+ alert('64以上の数値は入力できません')
208
+
209
+ return;
210
+
211
+ }
212
+
213
+ inputFont.value = Number(inputFont.value) + 1;
214
+
215
+ t.style.fontSize = Number(inputFont.value) + 'px';
216
+
217
+ });
218
+
219
+ }
220
+
221
+
222
+
223
+
224
+
225
+ // 文字の大きさメニュー矢印↓クリック
226
+
227
+
228
+
229
+ const contextMenu3 = (e) => {
230
+
195
231
  let t = event.target;
196
232
 
197
- const test = t;
198
-
199
233
  if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
200
234
 
201
-
202
-
235
+
236
+
203
- fontUp.addEventListener('click', (e) => {
237
+ 　 fontDown.addEventListener('click', (e) => {
204
-
238
+
205
- if(inputFont.value >= 64) {
239
+ if(inputFont.value >= 64) {
206
-
240
+
207
- alert('64以上の数値は入力できません')
241
+ alert('64以上の数値は入力できません')
208
-
242
+
209
- return;
243
+ return;
210
-
244
+
211
- }
245
+ }
246
+
212
-
247
+ inputFont.value = Number(inputFont.value) - 1;
248
+
249
+ t.style.fontSize = Number(inputFont.value) + 'px';
250
+
251
+ });
252
+
253
+ }
254
+
255
+
256
+
257
+
258
+
259
+
260
+
261
+ //addEventListner→onclickに変更した場合
262
+
263
+ // 文字の大きさメニュー 矢印↑クリック
264
+
265
+ element.oncontextmenu = (e) => {
266
+
267
+ let t = event.target;
268
+
269
+ if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
270
+
271
+
272
+
273
+ 　 fontUp.onclick = (e) => {
274
+
275
+ if(inputFont.value >= 64) {
276
+
277
+ alert('64以上の数値は入力できません')
278
+
279
+ return;
280
+
281
+ }
282
+
213
- inputFont.value = Number(inputFont.value) + 1;
283
+ inputFont.value = Number(inputFont.value) + 1;
214
-
284
+
215
- t.style.fontSize = Number(inputFont.value) + 'px';
285
+ t.style.fontSize = Number(inputFont.value) + 'px';
216
-
217
- });
286
+
218
-
219
- }
287
+ }
288
+
289
+ }
220
290
 
221
291
 
222
292
 
@@ -224,9 +294,7 @@
224
294
 
225
295
  // 文字の大きさメニュー矢印↓クリック
226
296
 
227
-
228
-
229
- const contextMenu3 = (e) => {
297
+ element.oncontextmenu = (e) => {
230
298
 
231
299
  let t = event.target;
232
300
 
@@ -234,86 +302,24 @@
234
302
 
235
303
 
236
304
 
237
- 　 fontDown.addEventListener('click', (e) => {
238
-
239
- if(inputFont.value >= 64) {
240
-
241
- alert('64以上の数値は入力できません')
242
-
243
- return;
244
-
245
- }
246
-
247
- inputFont.value = Number(inputFont.value) - 1;
248
-
249
- t.style.fontSize = Number(inputFont.value) + 'px';
250
-
251
- });
252
-
253
- }
254
-
255
-
256
-
257
-
258
-
259
- //addEventListner→onclickに変更した場合
260
-
261
-
262
-
263
- // 文字の大きさメニュー 矢印↑クリック
264
-
265
- element.oncontextmenu = (e) => {
266
-
267
- let t = event.target;
268
-
269
- if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
270
-
271
-
272
-
273
- 　 fontUp.onclick = (e) => {
274
-
275
- if(inputFont.value >= 64) {
276
-
277
- alert('64以上の数値は入力できません')
278
-
279
- return;
280
-
281
- }
282
-
283
- inputFont.value = Number(inputFont.value) + 1;
284
-
285
- t.style.fontSize = Number(inputFont.value) + 'px';
286
-
287
- }
288
-
289
- }
290
-
291
-
292
-
293
- // 文字の大きさメニュー矢印↓クリック
294
-
295
- element.oncontextmenu = (e) => {
296
-
297
- let t = event.target;
298
-
299
- if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
300
-
301
-
302
-
303
305
  　 fontDown.onclick = (e) => {
304
306
 
305
- if(inputFont.value >= 64) {
307
+ if(inputFont.value >= 64) {
306
-
308
+
307
- alert('64以上の数値は入力できません')
309
+ alert('64以上の数値は入力できません')
308
-
310
+
309
- return;
311
+ return;
310
-
312
+
311
- }
313
+ }
312
-
314
+
313
- inputFont.value = Number(inputFont.value) - 1;
315
+ inputFont.value = Number(inputFont.value) - 1;
314
-
316
+
315
- t.style.fontSize = Number(inputFont.value) + 'px';
317
+ t.style.fontSize = Number(inputFont.value) + 'px';
316
-
318
+
317
- }
319
+ }
318
-
320
+
319
- }`
321
+ }
322
+
323
+
324
+
325
+ ```