HTMLとJavaScriptのエラーコードの対処がわからない。

解答欄を増やそうとこのようなコードをしました。
<form>
<fieldset id="set1">
始点:<input type="text" class="idInpX0" autocomplete="off">
終点:<input type="text" class="idInpY0" autocomplete="off" >
<input type="hidden" class="idInpX1"value="0" >
<input type="hidden" class="idInpY1" value="0">
<input type="button" onclick="DrawLine('set1');"value="結線">
</fieldset>
<fieldset id ="set2">
始点:<input type="text" class="idInpX0" autocomplete="off">
終点:<input type="text" class="idInpY0"autocomplete="off" >
<input type="hidden" class="idInpX1"value="0" >
<input type="hidden" class="idInpY1" value="0">
<input type="button" onclick="DrawLine('set2');"value="結線">

</fieldset>


</form>

<script>
oCanvas = document.getElementById('idCanvas');
ctx = oCanvas.getContext('2d');
nCanvasW = oCanvas.width;
nCanvasH = oCanvas.height;
oImage = new Image();
oImage.src = '電圧比試験3.jpg';
oImage.onload = () => {
ctx.drawImage(oImage, 0, 0);

};
oInpX0 = document.getElementById('idInpX0');
oInpY0 = document.getElementById('idInpY0');
oInpX1 = document.getElementById('idInpX1');
oInpY1 = document.getElementById('idInpY1');
a1oCoordinate = [oInpX0,oInpY0,oInpX1,oInpY1];
let point = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18',];

function DrawLine(id){
var X0,X1,Y0,Y1,Y2;

//var 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18;

let qid = "#" + id;
let X3 = document.querySelector(qid + " .idInpX0").value;
let Y3 = document.querySelector(qid + " .idInpY0").value;
let X4 = document.querySelector(qid + " .idInpX1").value;
let Y4 = document.querySelector(qid + " .idInpY1").value;
let a1oCdn = a1oCoordinate;
let cdn = new Array()


let allow = true; // false; //
for(let i = 0; i<a1oCdn.length; i++ ){
let value = a1oCdn[i].value;
cdn[i] = null;
if( value ){
cdn[i] = Number(value);
}
console.log("i : "+i);
console.log("cdn[i] : "+cdn[i]);
if( ! Number.isFinite(cdn[i]) ){
allow = false; // true; //
}else{
// console.log("cdn[i] : "+cdn[i]);
}
}
こうすると画像のようなエラーが出ます。
どのようにしたらよいでしょうか。

No.1 回答者： fujillin 回答日時： 2020/12/17 13:18

こんにちは

何をしたいのか説明がまったくないし、画像は見えないのでサッパリですが・・・

まず、全体で「}」が一つ足りない。
（内容不明なので、どこが適切なのかわからないが、多分、最後かな？）

あとは、
＞oInpX0 = document.getElementById('idInpX0');
以下で、該当IDの要素が存在しないので、そのあとで参照しようとしても、もともと取得できていないものを参照しようとするので、エラーになる。

＞どのようにしたらよいでしょうか。
とりあえず、上記の辺りでしょうか。


しかしながら、varがあったり、letがあったり、何も宣言のない記述があったりと気まぐれな記述の感じ。
input要素の値を取得するのにも、複数で重複しているみたいだし、何をどうしたいのかよくわからん。
変数cdnにinput要素の値の配列を作成しようとしているみたいだけれど、そもそも値はDOMにあるし、手間をかけて不要なことをしているように感じる。
まぁ、後のハンドリングを良くしたいからという意味なら、
＞a1oCoordinate = [oInpX0,oInpY0,oInpX1,oInpY1];
までで、十分ではないのかな。
入力値のチェック（有効数値や範囲その他など）をして、修正などをした結果を新しい配列に入れるのならわからないでもないけれど。

HTMLの方もクラス名てんこ盛りだし、（やりたいことがわからないので何とも言えないが）もっとすっきりできそうな気配が…
input　type=hidden が必要なのかどうか、ご提示の範囲からはわからないけれど、雰囲気的にはいらなさそうな予感。