teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問queryselectorのidを変数で受け取りたい

編集履歴

質問編集履歴

4

変更した結果のエラーを記載しました。

2020/04/17 06:53

投稿

pyamathon
pyamathon

スコア14

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
 
18
18
 
19
+ document.querySelector（）の中がエラーで23行めで以下のエラーがでます。
20
+
19
- document.querySelector（）の中を変数にすると、変数t1がundefinedになったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
21
+ Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#[object HTMLInputElement]' is not a valid selector.
20
22
 
21
23
 
22
24
 
@@ -26,7 +28,7 @@
26
28
 
27
29
  ```HTML
28
30
 
29
- <html lang="jp" dir="ltr">
31
+ <html lang="jp" dir="ltr">
30
32
 
31
33
  <head>
32
34
 
@@ -68,11 +70,11 @@
68
70
 
69
71
  var array02 =[94774];
70
72
 
71
- var buttonC = (Search,Myfilter) =>{
73
+ var buttonC = (Search,Myfilter) =>{
72
-
74
+
73
- document.querySelector(" '¥¥#' + "+ Search +"").addEventListener('click',()=>{
75
+ document.querySelector('#' + Search).addEventListener('click',()=>{
74
-
76
+
75
- var t1 = parseInt(document.querySelector('¥¥# + Myfilter').value);
77
+ var t1 = parseInt(document.querySelector('#' + Myfilter).value);
76
78
 
77
79
  var res = arr.filter(x=>x[1]==t1).map(x=>x[3]);
78
80
 

3

誤字の修正

2020/04/17 06:53

投稿

pyamathon
pyamathon

スコア14

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- document.querySelector（）の中を変数にすると、変数t1が¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
19
+ document.querySelector（）の中を変数にすると、変数t1がundefinedになったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
20
20
 
21
21
 
22
22
 

2

誤字の修正をしました

2020/04/17 06:00

投稿

pyamathon
pyamathon

スコア14

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- document.querySelector（）の中を変数にすると、変数t1がy¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
19
+ document.querySelector（）の中を変数にすると、変数t1が¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
20
20
 
21
21
 
22
22
 

1

困っている点を詳細に書きました

2020/04/17 05:59

投稿

pyamathon
pyamathon

スコア14

test CHANGED
@@ -1 +1 @@
1
- 複数のボタンからcsvから違う列を取り出しグラフ化する
1
+ queryselectorのidを変数で受け取りたい
test CHANGED
@@ -8,23 +8,25 @@
8
8
 
9
9
  複数のボタン（今回は範囲検索）を押されたとき、それぞれのボタンに対応した行から情報を取得し同じように平均を取って描画をしたいです。
10
10
 
11
+ そのために2つのボタンに違うIDを与え、それぞれがクリックされたときに違う列から値を取り出したいです。
12
+
11
13
 
12
14
 
13
15
  ### 発生している問題
14
16
 
17
+
18
+
15
- 以前質問させていただいたコードを使っているのでどこを変更すればいいのか全くわかりません。
19
+ document.querySelector（）の中を変数にすると、変数t1がy¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
16
-
17
-
18
20
 
19
21
 
20
22
 
21
23
  ### 該当のソースコード
22
24
 
23
- 今回は文字数の制限でchart.jsが反応する部分を省いています。
25
+
24
26
 
25
27
  ```HTML
26
28
 
27
- <html lang="jp" dir="ltr">
29
+ <html lang="jp" dir="ltr">
28
30
 
29
31
  <head>
30
32
 
@@ -40,9 +42,25 @@
40
42
 
41
43
  <script src="Chart.min.js"></script>
42
44
 
45
+
46
+
43
47
  </head>
44
48
 
49
+ <body>
50
+
45
- <script>
51
+ <script>
52
+
53
+ window.addEventListener('DOMContentLoaded', ()=>{
54
+
55
+ var arr=[];
56
+
57
+ fetch('nout.csv')
58
+
59
+ .then(res=>res.text())
60
+
61
+ .then(res=>"[["+res.split(/[\n\r]+/).map(x=>x.split(",").map(x=>isNaN(x)&&!/^\".*?\"$/.test(x)?`"${x}"`:x).join(",")).join("],[")+"]]")
62
+
63
+ .then(res=>arr=JSON.parse(res))
46
64
 
47
65
  var MyC;
48
66
 
@@ -50,25 +68,15 @@
50
68
 
51
69
  var array02 =[94774];
52
70
 
53
- window.addEventListener('DOMContentLoaded', ()=>{
54
-
55
- var arr=[];
56
-
57
- fetch('nout.csv')
58
-
59
- .then(res=>res.text())
60
-
61
- .then(res=>"[["+res.split(/[\n\r]+/).map(x=>x.split(",").map(x=>isNaN(x)&&!/^\".*?\"$/.test(x)?`"${x}"`:x).join(",")).join("],[")+"]]")
62
-
63
- .then(res=>arr=JSON.parse(res))
71
+ var buttonC = (Search,Myfilter) =>{
64
-
72
+
65
- ifedocument.querySelector('#search1').addEventListener('click',()=>{
73
+ document.querySelector(" '¥¥#' + "+ Search +"").addEventListener('click',()=>{
66
-
74
+
67
- var t1=parseInt(document.querySelector('#myfilter1').value);
75
+ var t1 = parseInt(document.querySelector('¥¥# + Myfilter').value);
68
-
76
+
69
- var res=arr.filter(x=>x[1]==t1).map(x=>x[3]);
77
+ var res = arr.filter(x=>x[1]==t1).map(x=>x[3]);
70
-
78
+
71
- var sum=res.length==0?0:res.reduce((x,y)=>x+y);
79
+ var sum = res.length==0?0:res.reduce((x,y)=>x+y);
72
80
 
73
81
  document.querySelector('#span3').textContent=(sum/res.length);
74
82
 
@@ -76,13 +84,149 @@
76
84
 
77
85
  var t2 = sum/res.length ;
78
86
 
87
+ });('[href*="' + url + '"]')
88
+
89
+ if (MyC) {
90
+
91
+ MyC.destroy();
92
+
93
+ }
94
+
95
+ array01.push(t1);
96
+
97
+ array02.push(t2);
98
+
99
+ var ctx = document.getElementById("canvas");
100
+
101
+ MyC = new Chart(ctx, {
102
+
103
+ type: 'bar',
104
+
105
+ data: {
106
+
107
+ labels: array01,
108
+
109
+ datasets: [
110
+
111
+ {
112
+
113
+ label: ' ',
114
+
115
+ data: array02,
116
+
117
+ backgroundColor: "rgba(219,39," + t2 + ",0.5)"
118
+
119
+ }]
120
+
121
+ },
122
+
123
+ options: { //◆オプション
124
+
125
+ responsive: true, //グラフ自動設定
126
+
127
+ legend: { //凡例設定
128
+
129
+ display: false //表示設定
130
+
131
+ },
132
+
133
+ title: { //タイトル設定
134
+
135
+ display: true, //表示設定
136
+
137
+ fontSize: 30, //フォントサイズ
138
+
139
+ text: '検索結果' //ラベル
140
+
141
+ },
142
+
143
+ scales: { //軸設定
144
+
145
+ yAxes: [{ //y軸設定
146
+
147
+ display: true, //表示設定
148
+
149
+ scaleLabel: { //軸ラベル設定
150
+
151
+ display: true, //表示設定
152
+
153
+ labelString: '当せん金額', //ラベル
154
+
155
+ fontSize: 18 //フォントサイズ
156
+
157
+ },
158
+
159
+ ticks: { //最大値最小値設定
160
+
161
+ min: 0, //最小値
162
+
163
+ max: 150000, //最大値
164
+
165
+ fontSize: 18, //フォントサイズ
166
+
167
+ stepSize: 20000 //軸間隔　
168
+
169
+ },
170
+
171
+ }],
172
+
173
+ xAxes: [{ //x軸設定
174
+
175
+ display: true, //表示設定
176
+
177
+ barPercentage: 0.6, //棒グラフ幅
178
+
179
+ categoryPercentage: 1, //棒グラフ幅
180
+
181
+ scaleLabel: { //軸ラベル設定
182
+
183
+ display: true, //表示設定
184
+
185
+ labelString: '当せん番号', //ラベル
186
+
187
+ fontSize: 18 //フォントサイズ
188
+
189
+ },
190
+
191
+ ticks: {
192
+
193
+ fontSize: 18 //フォントサイズ
194
+
195
+ },
196
+
197
+ }],
198
+
199
+ },layout: { //レイアウト
200
+
201
+ padding: { //余白設定
202
+
203
+ left: 100,
204
+
205
+ right: 50,
206
+
207
+ top: 0,
208
+
209
+ bottom: 0
210
+
211
+ }
212
+
213
+ }
214
+
215
+ }
216
+
217
+ })}
218
+
219
+ buttonC(search1,myfilter1);
220
+
221
+ });
222
+
79
- </script>
223
+ </script>
80
224
 
81
225
  <div id="nout_csv"></div>
82
226
 
83
227
  <input type="text" id="myfilter1" maxlength="3" style="width:111px;height:60px;">
84
228
 
85
- <input type="text" id="myfilter2" maxlength="3" style="width:37px;height:60px;position:relative; left: 0px; top: 60px;">
229
+ <input type="text" id="myfilter2" maxlength="3" style="width:37px;height:60px;position:relative; left: 0px;top: 60px;">
86
230
 
87
231
  <input type="button" value="単番号検索" id="search1" style="position: relative; left: 0px; top: 0px;">
88
232
 
@@ -94,16 +238,14 @@
94
238
 
95
239
  <span id="span2"></span>
96
240
 
97
- });
98
-
99
- });
100
-
101
241
 
102
242
 
103
243
  </body>
104
244
 
105
245
  </html>
106
246
 
247
+
248
+
107
249
  ```
108
250
 
109
251
  ```csv
@@ -134,4 +276,4 @@
134
276
 
135
277
 
136
278
 
137
- ifを用いようとしたのですが、対応する（）が広すぎてどう変更していいのかわかりませんでした。ラジオボタンを用いて実装できるならと尚いいです。
279
+ 変数を変換できるように、””や¥¥を入れ替えたりしたのですが、エラーが出てしまいます。