HTMLとJavaScriptについて解答欄を増やしています。

コード
<fieldset>
始点:<input type='text' id='idInpX0' autocomplete="off">
終点:<input type='text' id='idInpY0'autocomplete="off" >
<input type='hidden' id='idInpX1'value='0' >
<input type='hidden' id='idInpY1' value='0'>
<input type='button' onclick='DrawLine();'value='結線'>
</fieldset>
<fieldset>
始点:<input type='text' id='idInpX0' autocomplete="off">
終点:<input type='text' id='idInpY0'autocomplete="off" >
<input type='hidden' id='idInpX1'value='0' >
<input type='hidden' id='idInpY1' value='0'>
<input type='button' onclick='DrawLine();'value='結線'>
<//input type='button' onclick='EndLine();'value='結線終了'>

</fieldset>


</form>

<script>

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(){
var X0,X1,X2,X3,Y0,Y1,Y2,Y3;

//var 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18;
let a1oCdn = a1oCoordinate;
let cdn = new Array()


let allow = true; // false; //
for(let i = 0; i<a1oCdn.length; i++, i<4){
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]);
}
}

このままだと重複できないのですがどうしたら良いでしょう。

質問者からの補足コメント

• ご回答ありがとうございます。
  別のところで画像のようにしたのですが、これだとFor文が反応せずにnullになってしまいます。
  反応させてかつ解答欄をふやすにはどうすればいいでしょうか。
  画像見えづらいかも知らないですがよろしくお願いします。

  
  No.1の回答に寄せられた補足コメントです。 補足日時：2020/12/18 11:38

• やっぱ見えないので付け足しておきます。
  <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>
  ...

    補足日時：2020/12/18 11:41

• let qid = "#" + id;
  var oInpX0 = document.querySelector(qid + " .idInpX0").value;
  var oInpY0 = document.querySelector(qid + " .idInpY0").value;
  var oInpX1 = document.querySelector(qid + " .idInpX1").value;
  var oInpY1 = document.querySelector(qid + " .idInpY1").value;
  a1oCoordinate = [oInpX0,oInpY0,oInpX1,oInpY1];

    補足日時：2020/12/18 11:42

• let a1oCdn = a1oCoordinate;
  let cdn = new Array()
  let allow = true; // false; //
  for(let i = 0; i<a1oCdn.length; i++ ){
  let value = a1oCdn.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]);
  }
  長くなりましたがお願いします。

    補足日時：2020/12/18 11:45

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2020/12/17 21:08

id 属性はページ内で同じ名前を使えません。

重複しても問題のない name 属性を使いましょう。

<input> 要素は id 属性ではなく name 属性で名付け
<form> 要素にも name 属性で名付け
document.forms[名前] で フォーム要素を取得
フォーム要素.elements[名前] で入力要素を取得
同じ名前の入力要素が複数あると配列として取得される

(参考)
<form name=f> <input name=x> <input name=x> </form>
<script>
var xs = document.forms["f"].elements["x"];
console.log(xs[0].value); // 1番目の x の値
console.log(xs[1].value); // 2番目の x の値
</script>