取得した値をfor文にて配列に格納(条件付き)

前提・実現したいこと

ユーザーが入力した値を繰り返し処理を用いて取得→配列に格納したいです。

したいのですが、条件があります。

1.ユーザーが入力するinput要素は5つ
2.input要素1つずつが、「フォーカスアウト時に」正規表現を行う(今回、正規表現はhtmlに書かないので省いています。そういう問題を解いていると思ってください)

上の条件を満たしつつ、値を繰り返し処理を用いて取得→配列に格納する方法のヒントをいただきたいです。

発生している問題・エラーメッセージ

1度動かしてから気づいたのですが、onblurを使うと1つのinputにユーザーが入力する度に空っぽの配列ができます。
6個のinputで配列が6個できてしまいます(やりたいのは1つの配列に値を6つ)。

私が実現したいことを実現するには、onblurを使っていては実現できないでしょうか？

その辺りに関しても、私が無知なので実現できていないのか、そもそも難しいのかを教えていただきたいです。

該当のソースコード

<form>
  <input type="text" id="number1" class="number" value="" onblur="check1()"><br>
  <input type="text" id="number2" class="number" value="" onblur="check1()"><br>
  <input type="text" id="number3" class="number" value="" onblur="check1()"><br>
  <input type="text" id="number4" class="number" value="" onblur="check1()"><br>
  <input type="text" id="number5" class="number" value="" onblur="check1()"><br>
  <input type="text" id="number6" class="number" value="" onblur="check1()"><br>
  <input type="button" value="結果" id="btn" onclick="window.click()"><br>
</form>



function click(){

//あってるかわかりませんが、下のようなfor文でフォーカスアウトされる度に配列にユーザーが入力した数字を格納したいです。getElementByIdの後のidのループのさせ方はやり方がわからないので、やりたいイメージを書いています。
var y = [];
  for ( var i = 1; i <= 6 ; i++ ) {
    y.push(document.getElementById('number' + i).value);
  }

takasima20

2021/04/25 12:16 編集

ループで集めつつ yに追加するのではなく、ループで集めたデータを y に追加する案件に見えますが? ていうか、フォーカスが外れたからといって入力されたとは限らないよね? ちなみにボタンは何をしたいの?

退会済みユーザー

2021/04/25 12:19

1個取得して配列に追加→1個取得して配列に追加→1個取得して... ではなく、 6個取得して6個配列に追加という意味でしょうか？申し訳ありませんが、そうだった場合に何がどう変わるのかもわからないです。

takasima20

2021/04/25 12:23

そうそう、未入力は許容すんの?

退会済みユーザー

2021/04/25 12:29

ボタンはユーザーが入力した数字と、コンピューターがランダムに生成した数字がどれだけ一致したかの結果を表示します。未入力は許容せず、正規表現を通った数字を配列に格納したいです。また、全てのinputに正規表現を通った数字が入力された時だけ btn.disabled = false; でボタンを押せるようにします。

takasima20

2021/04/25 12:36

ん? check1() で何をしたいのかがよくわかりません。話の流れだと入力チェックのように見えますが? つまり全部の input を処理する必要はないのでは?

退会済みユーザー

2021/04/25 12:47

すみません click(){ に修正しました。数字がどれだけ一致しているかをボタンを押して表示する際に、何個一致なら〇〇、何個一致なら〇〇... という表示をしたいのですが、その際に膨大な量の条件式を書くことになるので、配列に格納すれば記述量が減るかと思い(本当に減るか、どれだけ減るかは初学者なのでわかりません)、上記のような質問をさせていただきました。言葉足らずで申し訳ありません。

babu_babu_baboo

2021/04/25 21:55

自分の想像しえる範囲の回答でしか見向きもしないようですが、たった１行で済むことです。 (配列の中身が、文字列なのか整数なのかはっきりさせないと後々困ることになりますよ) let y = [...document.querySelectorAll ('form input.number')].map (e=> +e.value); -- >何個一致なら〇〇、何個一致なら〇〇... これだって１行で書ける（書いて見せてあげたのに残念）！

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

回答2件

blurでやる必要はないと思いますが・・・

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#btn').addEventListener('click',()=>{
4    const res=[...document.querySelectorAll('.number')].map(x=>x.value).filter(x=>x!=="").map(Number);
5    console.log(res);
6  });
7});
8</script>
9<form>
10  <input type="text" class="number"><br>
11  <input type="text" class="number"><br>
12  <input type="text" class="number"><br>
13  <input type="text" class="number"><br>
14  <input type="text" class="number"><br>
15  <input type="text" class="number"><br>
16  <input type="button" value="結果" id="btn">
17</form>

投稿2021/04/26 01:23

yambejp

総合スコア116724

退会済みユーザー

2021/04/26 04:41

ありがとうございます。上に記述したのですが、そういう問題を解いており、無事に解決いたしました。

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

ベストアンサー

とくに問題ないようです

html
1<html>
2<head>
3<script>
4function click1(){
5  let y = [];
6  for (let i = 1; i <= 6 ; i++) {
7    y.push(document.getElementById('number' + i).value);
8  }
9  console.log(y);
10}
11function check1() {}
12</script>
13</head>
14<body>
15<form>
16  <input type="text" id="number1" class="number" value="" onblur="check1()"><br>
17  <input type="text" id="number2" class="number" value="" onblur="check1()"><br>
18  <input type="text" id="number3" class="number" value="" onblur="check1()"><br>
19  <input type="text" id="number4" class="number" value="" onblur="check1()"><br>
20  <input type="text" id="number5" class="number" value="" onblur="check1()"><br>
21  <input type="text" id="number6" class="number" value="" onblur="check1()"><br>
22  <input type="button" value="結果" id="btn" onclick="click1()"><br>
23</form>
24</body>
25</html>