queryselectorのidを変数で受け取りたい

前提・実現したいこと

csvのデータを取り出し、CHART.jsを用いてグラフ化したいです。
現在1つのボタン（単番号検索）に対応して、検索された３桁の番号をcsvの2列目で検索し、それに対応する行の第４列目の値の平均を取ってグラフが描画される（例　１００が検索されたらcsv上の１００に対応する１０００００、4００００の平均をとり70000として描画する）のですが
複数のボタン（今回は範囲検索）を押されたとき、それぞれのボタンに対応した行から情報を取得し同じように平均を取って描画をしたいです。
そのために2つのボタンに違うIDを与え、それぞれがクリックされたときに違う列から値を取り出したいです。

発生している問題

document.querySelector（）の中がエラーで23行めで以下のエラーがでます。
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#[object HTMLInputElement]' is not a valid selector.

該当のソースコード

HTML
1<html lang="jp" dir="ltr">
2    <head>
3        <meta charset="utf-8">
4        <title>test</title>
5        <link href="css2.css" rel="stylesheet" type="text/css">
6        <script type="text/javascript" src="getCSV.js"></script>
7        <div id="nout_csv"></div>
8        <script src="Chart.min.js"></script>
9
10    </head>
11    <body>
12      <script>
13      window.addEventListener('DOMContentLoaded', ()=>{
14      var arr=[];
15      fetch('nout.csv')
16      .then(res=>res.text())
17      .then(res=>"[["+res.split(/[\n\r]+/).map(x=>x.split(",").map(x=>isNaN(x)&&!/^\".*?\"$/.test(x)?`"${x}"`:x).join(",")).join("],[")+"]]")
18      .then(res=>arr=JSON.parse(res))
19      var MyC;
20      var array01 =["平均"];
21      var array02 =[94774];
22      var buttonC = (Search,Myfilter) =>{
23      document.querySelector('#' + Search).addEventListener('click',()=>{
24      var t1 = parseInt(document.querySelector('#' + Myfilter).value);
25      var res = arr.filter(x=>x[1]==t1).map(x=>x[3]);
26      var sum = res.length==0?0:res.reduce((x,y)=>x+y);
27      document.querySelector('#span3').textContent=(sum/res.length);
28      document.querySelector('#span2').textContent=(t1);
29      var t2 = sum/res.length ;
30    });('[href*="' + url + '"]')
31    if (MyC) {
32          MyC.destroy();
33        }
34    array01.push(t1);
35    array02.push(t2);
36    var ctx = document.getElementById("canvas");
37        MyC = new Chart(ctx, {
38          type: 'bar',
39          data: {
40            labels: array01,
41            datasets: [
42              {
43                label: ' ',
44                data: array02,
45                backgroundColor: "rgba(219,39," + t2 + ",0.5)"
46              }]
47          },
48      options: {                             //◆オプション
49          responsive: true,                  //グラフ自動設定
50          legend: {                          //凡例設定
51              display: false                 //表示設定
52         },
53          title: {                           //タイトル設定
54              display: true,                 //表示設定
55              fontSize: 30,                  //フォントサイズ
56              text: '検索結果'                //ラベル
57          },
58          scales: {                          //軸設定
59              yAxes: [{                      //y軸設定
60                  display: true,             //表示設定
61                  scaleLabel: {              //軸ラベル設定
62                     display: true,          //表示設定
63                     labelString: '当せん金額',  //ラベル
64                     fontSize: 18               //フォントサイズ
65                  },
66                  ticks: {                      //最大値最小値設定
67                      min: 0,                   //最小値
68                      max: 150000,                  //最大値
69                      fontSize: 18,             //フォントサイズ
70                      stepSize: 20000               //軸間隔　
71                  },
72              }],
73              xAxes: [{                         //x軸設定
74                  display: true,                //表示設定
75                  barPercentage: 0.6,           //棒グラフ幅
76                  categoryPercentage: 1,      //棒グラフ幅
77                  scaleLabel: {                 //軸ラベル設定
78                     display: true,             //表示設定
79                     labelString: '当せん番号',  //ラベル
80                     fontSize: 18               //フォントサイズ
81                  },
82                  ticks: {
83                      fontSize: 18             //フォントサイズ
84                  },
85              }],
86          },layout: {                             //レイアウト
87              padding: {                          //余白設定
88                  left: 100,
89                  right: 50,
90                  top: 0,
91                  bottom: 0
92              }
93            }
94          }
95        })}
96        buttonC(search1,myfilter1);
97          });
98      </script>
99      <div id="nout_csv"></div>
100      <input type="text" id="myfilter1" maxlength="3" style="width:111px;height:60px;">
101      <input type="text" id="myfilter2" maxlength="3" style="width:37px;height:60px;position:relative; left: 0px;top: 60px;">
102      <input type="button" value="単番号検索" id="search1" style="position: relative; left: 0px; top: 0px;">
103      <input type="button" value="範囲検索" id="search2" style="position: absolute; top: 60px;">
104      <canvas id="canvas"></canvas>
105      <span id="span3"></span>
106      <span id="span2"></span>
107
108</body>
109</html>
110

csv
1nout.csv
2
32201,79,114,105200
42202,675,109,98000
52203,38,73,117800
62204,254,100,97800
72205,18,97,124200
82206,928,145,74000

試したこと

変数を変換できるように、””や¥¥を入れ替えたりしたのですが、エラーが出てしまいます。

kei344

2020/04/17 07:13

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

pyamathon

2020/04/17 07:31

ご指摘ありがとうございます。あとから確認されるという意識のないままの投稿、修正になってしまい申し訳ありませんでした。今回のページからよりよいものに変更できるよう精進して参ります。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

変数Myfilterにidの文字列が入っていると仮定すれば。

js
1// document.querySelector('¥¥# + Myfilter').value
2//                         ↓
3   document.querySelector('#' + Myfilter).value

投稿2020/04/17 06:21

kei344

総合スコア69407

pyamathon

2020/04/17 07:02

ご返信ありがとうございます。ご指摘のとおり変更したところ、 document.querySelector（）の中がエラーで23行めで以下のエラーがでます。 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#[object HTMLInputElement]' is not a valid selector. queryselectorの中に変数を入れることは可能なのでしょうか。よろしくお願いします。