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

編集履歴

質問編集履歴

4

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

2020/04/17 06:53

投稿

pyamathon
pyamathon

スコア14

title CHANGED
File without changes
body CHANGED
@@ -7,12 +7,13 @@
7
7
 
8
8
  ### 発生している問題
9
9
 
10
+ document.querySelector（）の中がエラーで23行めで以下のエラーがでます。
10
- document.querySelector（）の中を変数にすると、変数t1がundefinedになったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
11
+ Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#[object HTMLInputElement]' is not a valid selector.
11
12
 
12
13
  ### 該当のソースコード
13
14
 
14
15
  ```HTML
15
- <html lang="jp" dir="ltr">
16
+ <html lang="jp" dir="ltr">
16
17
  <head>
17
18
  <meta charset="utf-8">
18
19
  <title>test</title>
@@ -33,9 +34,9 @@
33
34
  var MyC;
34
35
  var array01 =["平均"];
35
36
  var array02 =[94774];
36
- var buttonC = (Search,Myfilter) =>{
37
+ var buttonC = (Search,Myfilter) =>{
37
- document.querySelector(" '¥¥#' + "+ Search +"").addEventListener('click',()=>{
38
+ document.querySelector('#' + Search).addEventListener('click',()=>{
38
- var t1 = parseInt(document.querySelector('¥¥# + Myfilter').value);
39
+ var t1 = parseInt(document.querySelector('#' + Myfilter).value);
39
40
  var res = arr.filter(x=>x[1]==t1).map(x=>x[3]);
40
41
  var sum = res.length==0?0:res.reduce((x,y)=>x+y);
41
42
  document.querySelector('#span3').textContent=(sum/res.length);

3

誤字の修正

2020/04/17 06:53

投稿

pyamathon
pyamathon

スコア14

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  ### 発生している問題
9
9
 
10
- document.querySelector（）の中を変数にすると、変数t1が¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
10
+ document.querySelector（）の中を変数にすると、変数t1がundefinedになったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
11
11
 
12
12
  ### 該当のソースコード
13
13
 

2

誤字の修正をしました

2020/04/17 06:00

投稿

pyamathon
pyamathon

スコア14

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  ### 発生している問題
9
9
 
10
- document.querySelector（）の中を変数にすると、変数t1がy¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
10
+ document.querySelector（）の中を変数にすると、変数t1が¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
11
11
 
12
12
  ### 該当のソースコード
13
13
 

1

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

2020/04/17 05:59

投稿

pyamathon
pyamathon

スコア14

title CHANGED
@@ -1,1 +1,1 @@
1
- 複数のボタンからcsvから違う列を取り出しグラフ化する
1
+ queryselectorのidを変数で受け取りたい
body CHANGED
@@ -3,15 +3,16 @@
3
3
  csvのデータを取り出し、CHART.jsを用いてグラフ化したいです。
4
4
  現在1つのボタン（単番号検索）に対応して、検索された３桁の番号をcsvの2列目で検索し、それに対応する行の第４列目の値の平均を取ってグラフが描画される（例　１００が検索されたらcsv上の１００に対応する１０００００、4００００の平均をとり70000として描画する）のですが
5
5
  複数のボタン（今回は範囲検索）を押されたとき、それぞれのボタンに対応した行から情報を取得し同じように平均を取って描画をしたいです。
6
+ そのために2つのボタンに違うIDを与え、それぞれがクリックされたときに違う列から値を取り出したいです。
6
7
 
7
8
  ### 発生している問題
8
- 以前質問させていただいたコードを使っているのでどこを変更すればいいのか全くわかりません。
9
9
 
10
+ document.querySelector（）の中を変数にすると、変数t1がy¥undefined担ったり、syntaxerrorやUncaught DOMException: Failed to execute 'querySelector’のエラーが出てしまいます。
10
11
 
11
12
  ### 該当のソースコード
12
- 今回は文字数の制限でchart.jsが反応する部分を省いています。
13
+
13
14
  ```HTML
14
- <html lang="jp" dir="ltr">
15
+ <html lang="jp" dir="ltr">
15
16
  <head>
16
17
  <meta charset="utf-8">
17
18
  <title>test</title>
@@ -19,38 +20,108 @@
19
20
  <script type="text/javascript" src="getCSV.js"></script>
20
21
  <div id="nout_csv"></div>
21
22
  <script src="Chart.min.js"></script>
23
+
22
24
  </head>
25
+ <body>
23
- <script>
26
+ <script>
24
- var MyC;
25
- var array01 =["平均"];
26
- var array02 =[94774];
27
27
  window.addEventListener('DOMContentLoaded', ()=>{
28
28
  var arr=[];
29
29
  fetch('nout.csv')
30
30
  .then(res=>res.text())
31
31
  .then(res=>"[["+res.split(/[\n\r]+/).map(x=>x.split(",").map(x=>isNaN(x)&&!/^\".*?\"$/.test(x)?`"${x}"`:x).join(",")).join("],[")+"]]")
32
32
  .then(res=>arr=JSON.parse(res))
33
+ var MyC;
34
+ var array01 =["平均"];
35
+ var array02 =[94774];
36
+ var buttonC = (Search,Myfilter) =>{
33
- ifedocument.querySelector('#search1').addEventListener('click',()=>{
37
+ document.querySelector(" '¥¥#' + "+ Search +"").addEventListener('click',()=>{
34
- var t1=parseInt(document.querySelector('#myfilter1').value);
38
+ var t1 = parseInt(document.querySelector('¥¥# + Myfilter').value);
35
- var res=arr.filter(x=>x[1]==t1).map(x=>x[3]);
39
+ var res = arr.filter(x=>x[1]==t1).map(x=>x[3]);
36
- var sum=res.length==0?0:res.reduce((x,y)=>x+y);
40
+ var sum = res.length==0?0:res.reduce((x,y)=>x+y);
37
41
  document.querySelector('#span3').textContent=(sum/res.length);
38
42
  document.querySelector('#span2').textContent=(t1);
39
43
  var t2 = sum/res.length ;
44
+ });('[href*="' + url + '"]')
45
+ if (MyC) {
46
+ MyC.destroy();
47
+ }
48
+ array01.push(t1);
49
+ array02.push(t2);
50
+ var ctx = document.getElementById("canvas");
51
+ MyC = new Chart(ctx, {
52
+ type: 'bar',
53
+ data: {
54
+ labels: array01,
55
+ datasets: [
56
+ {
57
+ label: ' ',
58
+ data: array02,
59
+ backgroundColor: "rgba(219,39," + t2 + ",0.5)"
60
+ }]
61
+ },
62
+ options: { //◆オプション
63
+ responsive: true, //グラフ自動設定
64
+ legend: { //凡例設定
65
+ display: false //表示設定
66
+ },
67
+ title: { //タイトル設定
68
+ display: true, //表示設定
69
+ fontSize: 30, //フォントサイズ
70
+ text: '検索結果' //ラベル
71
+ },
72
+ scales: { //軸設定
73
+ yAxes: [{ //y軸設定
74
+ display: true, //表示設定
75
+ scaleLabel: { //軸ラベル設定
76
+ display: true, //表示設定
77
+ labelString: '当せん金額', //ラベル
78
+ fontSize: 18 //フォントサイズ
79
+ },
80
+ ticks: { //最大値最小値設定
81
+ min: 0, //最小値
82
+ max: 150000, //最大値
83
+ fontSize: 18, //フォントサイズ
84
+ stepSize: 20000 //軸間隔　
85
+ },
86
+ }],
87
+ xAxes: [{ //x軸設定
88
+ display: true, //表示設定
89
+ barPercentage: 0.6, //棒グラフ幅
90
+ categoryPercentage: 1, //棒グラフ幅
91
+ scaleLabel: { //軸ラベル設定
92
+ display: true, //表示設定
93
+ labelString: '当せん番号', //ラベル
94
+ fontSize: 18 //フォントサイズ
95
+ },
96
+ ticks: {
97
+ fontSize: 18 //フォントサイズ
98
+ },
99
+ }],
100
+ },layout: { //レイアウト
101
+ padding: { //余白設定
102
+ left: 100,
103
+ right: 50,
104
+ top: 0,
105
+ bottom: 0
106
+ }
107
+ }
108
+ }
109
+ })}
110
+ buttonC(search1,myfilter1);
111
+ });
40
- </script>
112
+ </script>
41
113
  <div id="nout_csv"></div>
42
114
  <input type="text" id="myfilter1" maxlength="3" style="width:111px;height:60px;">
43
- <input type="text" id="myfilter2" maxlength="3" style="width:37px;height:60px;position:relative; left: 0px; top: 60px;">
115
+ <input type="text" id="myfilter2" maxlength="3" style="width:37px;height:60px;position:relative; left: 0px;top: 60px;">
44
116
  <input type="button" value="単番号検索" id="search1" style="position: relative; left: 0px; top: 0px;">
45
117
  <input type="button" value="範囲検索" id="search2" style="position: absolute; top: 60px;">
46
118
  <canvas id="canvas"></canvas>
47
119
  <span id="span3"></span>
48
120
  <span id="span2"></span>
49
- });
50
- });
51
121
 
52
122
  </body>
53
123
  </html>
124
+
54
125
  ```
55
126
  ```csv
56
127
  nout.csv
@@ -66,4 +137,4 @@
66
137
 
67
138
  ### 試したこと
68
139
 
69
- ifを用いようとしたのですが、対応する（）が広すぎてどう変更していいのかわかりませんでした。ラジオボタンを用いて実装できるならと尚いいです。
140
+ 変数を変換できるように、””や¥¥を入れ替えたりしたのですが、エラーが出てしまいます。